Блог

Я создаю список с помощью bootstrap-Accordion, используя react-bootstrap, и выбранному я даю цвет фона и некоторую границу слева

Проблема в

Когда я делаю это так, чтобы во время активной панели текст смещался вправо, т. Е. происходит какое-то неправильное выравнивание, я не знаю, что мне нужно делать

 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 amp;amp;
              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>
  

);

Код песочницы кода

Границы влияют на размер элемента, поэтому, если вы измените ширину границы, это повлияет на макет. У вас есть несколько вариантов:

1. Установите ширину границы на постоянное значение и измените цвет с прозрачного на ваш активный цвет.

 .item {
  border: 4px solid transparent;
}

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

2. Используйте box-shadow вместо border, который не изменяет размер элемента и при использовании с нулевым размытием часто может достигать того же эффекта, что и border. Здесь возможны проблемы с z-индексом, если тени не вставлены. (Последующие элементы находятся впереди и могут скрывать тень предыдущего элемента.)

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

Наведите курсор на каждый пример (граница, вставка с тенью, вставка с тенью) ниже, чтобы увидеть различия.

• Пример границы немного шире из-за невидимой границы размером 4 пикселя.
• Первый (не вставленный) пример с теневой рамкой помещает «границу» за пределы элемента.
• Пример inset 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>