как сделать элемент шире чем колонки в бутстрапе?

Question

полоска должна быть на 2-3% шире чем 12 колонок. абсолютное позиционирование не выход - оч кривая адаптивность.
контейнер у меня обычный(.container), колонок 12

<body class="container-lg">
<header class="row">
    <div class="header-itself col-12">
        <a href="#">
            <img src="res/logo.svg" alt="logo.svg">
        </a>

        <a class="lang-btn" href="#">ENG</a>

        <form class="main-search">
            <input type="search" placeholder="Search...">
            <button></button>
        </form>
        <div class="user-btns-container">
            <button class="user-btn" style="background-image: url(res/account.svg)"></button>
            <button class="user-btn" style="background-image: url(res/compare.svg)"></button>
            <button class="user-btn" style="background-image: url(res/cart.svg)"></button>
        </div>
    </div>
    <div class="line-a col-12"></div>
    <div class="under-header"></div>
</header>
</body>

body {
  font-family: Noto Sans, serif;
  font-style: normal;
}

.line-a {
  // big line dividing the sections

  border: 1px solid #000000;
}


/* header ----------------------------------------------- */
.header-itself {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.lang-btn {
  color: black;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.7rem;
  &:hover {
    color: $main-color;
  }
}

.main-search {
  position: relative;
  width: 45%;
  height: 50%;
  input {
    width: 100%;
    height: 100%;
    border: solid 2px;
  }
  button {
    position: absolute;
    right: 0;

    width: 41px;
    height: 41px;



    border: none;
    cursor: pointer;
    background: transparent url("res/found-btn.svg") no-repeat center;

  }
}







.user-btns-container {
  display: flex;
  justify-content: space-between;
  width: 15%;
  .user-btn {
    cursor: pointer;
    background: transparent no-repeat;

    border: none;
    width: 41px;
    height: 41px
  }
}

Answer 1

Раз уж адаптивность кривая, то будем этому следовать до конца.

header::after {
    content: "";
    display: block;
    height: 1px;
    /* По-моему, 12 колонок это как раз-таки 1200px */
    width: calc(1200px + 30px);
    /* Сдвигаем на половину выступающего края */
    margin-left: calc(-30px / 2);
    background: black;
}

А вообще как делаю я: вкладываю div.container в header. Это избавляет от многих проблем, в т.ч. когда шапке нужен фон.

БЛОГ НА HUSL

как сделать элемент шире чем колонки в бутстрапе?

Ответы (1 шт):