Вертикальная колонка сдвигается вниз по другим элементам сетки // Bootstrap 3

-1

Я пытаюсь понять, как я могу сделать сетку правильной для моих нужд, но я разбил свой разум. Извините за мой английский - просто посмотрите на скриншоты.Вертикальная колонка сдвигается вниз по другим элементам сетки // Bootstrap 3

>What I'm getting!<

>What I need!<

источник

2016-04-15 Daniil Maksimkin

Не могли бы вы опубликовать код, который вы пробовали? –

Да, конечно. Это простая версия моей сетки - [link] (https://jsfiddle.net/kindsage/7omn0hpf/) –

Трудно сказать по вашему вопросу, но я предполагаю, что вы хотите, чтобы все столбцы в строке оставались такая же высота. Если да, проверьте ответы на этот вопрос: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – sean

Его довольно просто, все, что вам нужно, чтобы убедиться, что логотип обертка будет достаточно большим. Вы также можете использовать div с классом .clearfix или установить высоту с помощью css. Вот рабочий пример

http://codepen.io/anon/pen/MyGKEL

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <style> 
     #logo img { 
      width: 100%; 
      height: auto; 
     } 

     #sidebar { 
      border: 1px solid black; 
      clear: both; 
      float: left; 
     } 

     #logo { 
      padding: 10px 0 
     } 

    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-2" id="logo"> 

       <img src="http://dummyimage.com/200x400" width="100%" /> 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-4" id="phone"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-10" id="nav"> 

      <nav class="navbar navbar-default navbar-static-top"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
</nav> 


      <div class="col-md-9"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut 
     </div> 
      </div> 

      <div class="col-md-2" id="sidebar"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2016-04-15 21:40:27 Ganga

Спасибо. Я попробую! Что Вы думаете об этом? https://jsfiddle.net/kindsage/e7L6Lc1n/ Как я могу добавить боковую панель в разделе LOGO? –

Я обновил код, чтобы вы могли проверить, как он работает с фиксированной высотой и боковой панелью под обложкой логотипа. – Ganga

Я вижу. Это основная проблема - у логотипа есть незафиксированный хед –

Вертикальная колонка сдвигается вниз по другим элементам сетки // Bootstrap 3

ответ

Смежные вопросы