Bootstrap смещ_по_столбцам макет на основе разрешения устройства

Question

Использование Bootstrap 3, у меня есть 3 колонки, например так:

<div class="container container-fluid"> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">1</div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">2</div> 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">3</div> 
</div> 

Cols 33% для больших устройств и настольных компьютеров, а затем 50% на таблетках и 100% на мобильном телефоне. Когда он попадает на рабочий стол (768px-992px, я думаю, это классическая точка останова Bootstrap), мне нужно, чтобы третий столбец находился под двумя первыми и центрировал середину экрана.

Как я могу это сделать?

Позже редактирования: Мне удалось добавить еще один класс третьего Col:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 myclass">3</div> 

Затем изменить носитель моей темы в опрашивает

@media all and (min-width: 769px) and (max-width: 992px) { 
    .myclass { 
     margin-left: 25%; 
     margin-top: 30px; 
    } 
} 

Но я все еще надеюсь, что есть еще один способ, не изменяя Начальные классы Bootstrap. Любые другие мысли?

Это то, что мне нужно: http://s12.postimg.org/9xynp7mod/layout.png

Answer 1

Пару моментов отметить первый:

1. Try думать мобильный первый, это действительно помогает с Bootstrap. Поэтому сначала поставьте мобильные классы.
2. Вам не нужно указывать все размеры, самый маленький размер будет применяться. Например, просто используйте col-xs-* и col-lg-*, а размеры sm и md будут такими же, как xs.
3. Убедитесь, что вы следуете стандартам Bootstrap и используете правильную иерархию классов. Вам не хватает row div.

Чтобы решить вашу проблему сейчас, код выглядит следующим образом. Обратите внимание, что вы можете вложить row элементы:

.red { 
 
    background-color: red; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.green { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<div class="container container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-lg-4 red">1</div> 
 
    <div class="col-xs-12 col-sm-6 col-lg-4 blue">2</div> 
 
    <div class="col-xs-12 col-sm-12 col-lg-4"> 
 
     <div class="row"> 
 
      <div class="col-sm-6 col-sm-push-3 col-lg-push-0 col-lg-12 green">3</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

добавить Col-см-нажимной 4 к 3. Например:

<div class="container"> 
     <div class="row"> 
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 1</div> 
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 2</div> 
      <div class="col-sm-push-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">This is Div 3</div> 
     </div> 
</div> 

Возможно, вам потребуется немного сыграть с цифрами, чтобы получить именно то, что вы хотите.

Answer 3

Вы можете достичь эффекта я думаю, что вы ищете с помощью COL смещения классов Bootstrap в, с чем-то вроде следующего

<div class="red col-xs-4 col-xs-offset-2 col-sm-offset-0"></div> 
<div class="green col-xs-4"></div> 
<div class="blue col-xs-4 col-xs-offset-4 col-sm-offset-0"></div> 

Имейте существенное добавление поля слева от рассматриваемого элемента, равного количеству столбцов контента, таким же образом, как и в вашем примере кода. Что касается вертикального интервала, к которому, к сожалению, вам придется добавить вручную, поскольку Bootstrap действительно ничего не делает для вертикального выравнивания.

См https://jsfiddle.net/zwoL2uwe/1/ для рабочего примера, и http://getbootstrap.com/css/#grid-offsetting для деталей колонок компенсировали в документации