ширина бункера бутстрапа и центровка сетки

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

<body> 
<div class="container" width="400px" > 
<div class='row'> 
<div class="col-md-2"> 
<img class='img-responsive' class="thumbnail"  src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/ width= '100px'> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
</div> 
<div class='row'> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />  
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
</div> 
</div>

источник

2016-07-12 S Walsh

Пробовал писать пользовательский код? Bootstrap - это основа, основанная на нем. –

Настройка ширины изображения 100px отменяется с помощью 'img-responsive' – ZimSystem

. Вы также используете два тега класса, и в чем смысл использования' img-responsive', если вы используете фиксированную ширину 100px? 'width = '100px' class = 'img-responsive' class =" thumbnail "' – vanburen

Я рекомендую сделать простой класс для использования там, где вам потребуется прокладка строки.

.row-padded 
{ 
    margin-top:20px; 
}

То же самое для снятия промежутков между колоннами.

.column-nospace 
{ 
    padding: 0 !important; 
    margin: 0 !important; 
}

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

Вот скрипка, которая показывает, что вы хотите (я думаю). https://jsfiddle.net/Gt25L/583/

источник

2016-07-12 14:30:20 CrazyPaste

Bootstrap имеет смещение, которое может быть определено для каждого столбца.

Вы можете обернуть каждую строку в COL-MD-6 и дать ему смещение 3.

Бутстрап делает их сетку с шириной в процентах. Поэтому, если ваша колонка шириной 6, она будет иметь ширину 50%, а по центру столбца будет 25% с каждой стороны.

<div class='row'> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="col-md-2"> 
      <img class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" width='100px'> 
     </div> 
     <div class="col-md-2"> 
      <img width='100px' class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/> 
     </div> 
     <div class="col-md-2"> 
      <img width='100px' class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/> 
     </div> 
    </div> 
</div>

источник

2016-07-12 14:33:12 Tom

ширина бункера бутстрапа и центровка сетки

ответ

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