给予边境线-造成错位问题

Question

我正在用自举手风琴制作列表，使用反光引导，而对于选择的一个，我给背景颜色和一些边框左。

问题是

当我这样做时，在活动栏的时候，文本正在向右移动，即出现了一些错误对齐，我不知道我需要做什么

return (
<div>
  <div className={props.trigger_value ? "sidebar" : "sidebar_shrink"}>
    <hr></hr>

    <Accordion className="menue_group">
      {data_json.map((item, index) => (
        <>
          <CustomToggle
            eventKey={index}
            handleClick={() => {
              if (activeKey === index) {
                setActiveKey(null);
                setmenue_active(activeKey);
              } else {
                setActiveKey(index);
                setmenue_active(index);
              }
            }}
          >
            {item.menu}
            {item.submenu ? (
              activeKey === index ? (
                <i className="fas fa-angle-down float-right pr-3"></i>
              ) : (
                <i className="fas fa-angle-up float-right pr-3"></i>
              )
            ) : null}
          </CustomToggle>
          <div className="container-fluid">
            {item.submenu &&
              item.submenu.map((li, index1) => (
                <Accordion.Collapse eventKey={index}>
                  <div key={index1}>
                    <div
                      className={
                        index1 === activeKey_submenu
                          ? "submenue submenue_active container"
                          : "submenue container"
                      }
                      onClick={() => subMenue_click(index1)}
                    >
                      {li.menu}
                    </div>
                  </div>
                </Accordion.Collapse>
              ))}
          </div>
        </>
      ))}
    </Accordion>

    <button className="btn btn-primary" onClick={props.triger_sidebar}>
      test
    </button>
  </div>
</div>

)；

沙箱码

Answer 1

边框因素影响元素的大小，因此，如果更改边框宽度，则会影响布局。你有几个选择：

1. 将边框宽度设置为一致的值，并将颜色从透明切换到活动颜色。

.item {
  border: 4px solid transparent;
}

.item.active {
  border-color: red;
}

1. 使用box-shadow而不是边框，这不会改变元素的大小，当使用零模糊时，通常可以达到与边框相同的效果。如果阴影没有嵌入，这里可能会出现z索引的障碍。(后面的元素位于前面，可能掩盖了前一个元素的阴影。)

.item.active {
  box-shadow: inset 4px 0 0 red;
}

在下面的每个示例(边框、框影、框影内嵌)上悬停以查看差异。

• 由于不可见的4px边框，边框示例稍微宽一些。
• 第一个(非嵌入)框影示例将“边框”放置在元素之外。
• inset框影示例将“边框”放置在元素中。

​

.item {
  background: aliceblue;
  max-width: 150px;
  padding: 4px;
  margin-bottom: 4px;
}

.border {
  border-right: 4px solid transparent;
}

.border:hover {
  border-right-color: red;
}

.shadow:hover {
  box-shadow: 4px 0 0 red;
}

.shadow-inset:hover {
  box-shadow: inset -4px 0 0 red;
}

<div class="item border">Border Color</div>
<div class="item shadow">Box Shadow</div>
<div class="item shadow-inset">Box Shadow Inset</div>

​