javascript - 赋予边界向右导致未对齐问题

问题描述

我正在使用 react-bootstrap 制作带有 bootstrap-Accordion 的列表，并且对于选定的列表，我给出了背景颜色和一些边框

问题是

当我这样做时，在活动栏时，文本向右移动，即发生了一些未对齐，我不知道我需要做什么

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>

);

代码沙盒代码

标签： javascriptcssreactjsbootstrap-4

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

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

.item {
  border: 4px solid transparent;
}

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

使用box-shadow而不是边框，它不会改变元素的大小，并且当与零模糊一起使用时，通常可以达到与边框相同的效果。如果没有插入阴影，z-index 可能会出现障碍。（后续元素在前面，可能会遮挡前一个元素的阴影。）

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

将鼠标悬停在下面的每个示例（边框、框阴影、框阴影插图）上以查看差异。

由于不可见的 4px 边框，边框示例略宽。
第一个（非插入）box-shadow 示例将“边框”放置在元素之外。
插入框阴影示例将“边框”放置在元素内。

.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>

javascript - 赋予边界向右导致未对齐问题

问题描述

解决方案

推荐阅读