Как реализовать сетку?

117

18 июня 2019, 23:20

Как с помощью сети bootstrap, реализовать те две колонки (первую выделил на скриншоте), которые выходят за пределы 12 колоночной сетки?

Answer 1

Вижу два способа трактовать этот макет.

1) Если две "боковые" колонки свешиваются за края контейнера. то на узких экранах им не хватит места. Контейнер займёт всю (или почти всю) ширину экрана, и эти колонки окажутся обрезаны или невидимы.

https://codepen.io/glebkema/pen/yGOGmZ

.expand { 
  margin: 0 -16.66666667%;  /* = ( 133.(3)% - 100% ) / 2 */ 
  width:  133.33333333%;  /* = 100% * 8 / 6 */ 
} 
 
/* раскрасим для наглядности */ 
.col-xs-1:before, 
.col-xs-3:before { 
  content: ''; 
  display: block; 
  height: 60px; 
  margin: 9px 0; 
} 
.col-xs-1:before { 
  background: blue; 
} 
.col-xs-3:before { 
  background: red; 
}

<div class="container"> 
  <div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
  </div> 
</div> 
 
<div class="container"> 
  <div class="row"> 
    <div class="expand"> 
      <div class="col-xs-6"> 
        <div class="row"> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
        </div> 
      </div> 
      <div class="col-xs-6"> 
        <div class="row"> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
          <div class="col-xs-3"></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

2) Предположим, что широкая часть с боковыми колонками - это и сеть контейнер. По ширине надписей мне кажется, что широкую часть макета можно разделить на 8 равных колонок.

А узкая часть макета содержит 12 колонок, но занимает 6/8 от ширины контейнера.

Такой вариант можно реализовать на чистом Бутстрапе. Для третьей версии это будет, например, так:

https://codepen.io/glebkema/pen/LMNqpR

/* раскрасим для наглядности */ 
.col-xs-2:before, 
.col-xs-3:before { 
  content: ''; 
  display: block; 
  height: 60px; 
  margin: 9px 0; 
} 
.col-xs-2:before { 
  background: red; 
} 
.col-xs-3:before { 
  background: blue; 
}

<div class="container"> 
  <div class="row"> 
    <div class="col-xs-6"> 
      <div class="row"> 
        <div class="col-xs-9 col-xs-offset-3"> 
          <div class="row"> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="col-xs-6"> 
      <div class="row"> 
        <div class="col-xs-9"> 
          <div class="row"> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
            <div class="col-xs-2"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
 
  <div class="row"> 
    <div class="col-xs-6"> 
      <div class="row"> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
      </div> 
    </div> 
    <div class="col-xs-6"> 
      <div class="row"> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
        <div class="col-xs-3"></div> 
      </div> 
    </div> 
  </div> 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Но если нет запрета на дополнения к Бутстрапу, то можно задать более узкий контейнер для верхней части макета и добавить колонки шириной в 1/8 для нижней части.

https://codepen.io/glebkema/pen/roePGV

.container-narrow { 
  width: 75%;  /* 100% * 6 / 6 */ 
} 
 
@media (min-width: 768px) { 
  .container-narrow { 
    width: 562px;  /* 750px * 6 / 6 */ 
  } 
} 
@media (min-width: 992px) { 
  .container-narrow { 
    width: 728px;  /* 970px * 6 / 6 */ 
  } 
} 
@media (min-width: 1200px) { 
  .container-narrow { 
    width: 878px;  /* 1170px * 6 / 6 */ 
  } 
} 
 
.col-xs-eighth { 
  position: relative; 
  min-height: 1px; 
  padding-right: 15px; 
  padding-left: 15px; 
  float: left; 
  width: 12.5%; 
} 
 
/* раскрасим для наглядности */ 
.col-xs-1:before, 
.col-xs-eighth:before { 
  content: ''; 
  display: block; 
  height: 60px; 
  margin: 9px 0; 
} 
.col-xs-1:before { 
  background: red; 
} 
.col-xs-eighth:before { 
  background: blue; 
}

<div class="container container-narrow"> 
  <div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-1"></div> 
  </div> 
</div> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
    <div class="col-xs-eighth"></div> 
  </div> 
</div> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Answer 2

<div class="container-fluid">
  ...
</div>

Answer 3

Bootstrap 4 стандартный navbar + .container-fluid и никаких колонок:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > 
   
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <div class="container-fluid"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav ml-auto"> 
        <li class="nav-item active"> 
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Link</a> 
        </li> 
        <li class="nav-item dropdown"> 
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
            Dropdown 
          </a> 
          <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="#">Action</a> 
            <a class="dropdown-item" href="#">Another action</a> 
            <div class="dropdown-divider"></div> 
            <a class="dropdown-item" href="#">Something else here</a> 
          </div> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link disabled" href="#">Disabled</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</nav>