Как центрировать контейнер бутстрапа внутри div?

Я использую bootstrap grid, чтобы показать галерею изображений. Теперь я хочу сосредоточить весь загрузочный файл .container в пределах div (.abc). Вот ссылка на скрипку - http://jsfiddle.net/tn3j2kos/Как центрировать контейнер бутстрапа внутри div?

Код ниже -

.abc { 
 
    margin: auto; 
 
    width: 96%; 
 
    background-color: #ffffcc; 
 
} 
 
.imgframe { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 80px; 
 
    margin: 5px; 
 
} 
 
div img { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    max-height: 70px; 
 
    max-width: 110px; 
 
    margin: auto; 
 
}

<head> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="abc"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail"> 
 
      <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
 
     </div> 
 
     <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail"> 
 
      <img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" /> 
 
     </div> 
 
     <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail"> 
 
      <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
 
     </div> 
 
     <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail"> 
 
      <img src="https://g.twimg.com/About_logoUsage.png" /> 
 
     </div> 
 
     <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail"> 
 
      <img src="https://g.twimg.com/About_logoUsage.png" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Подробнее - Образец в скрипку имеет пять миниатюр. Я хочу, чтобы миниатюры в пределах div .row были выровнены влево. И группа миниатюр (внутри div .container) будет выровнена по центру внутри div .abc.

Мое несколько попыток потерпели неудачу, и я отправил код для моей последней попытки.

РЕДАКТИРОВАТЬ - Не мешайте запускать фрагмент кода внутри SO, поскольку он неправильно отображается. Используйте js скрипку, которую я написал сверху.

EDIT 2 - Возможно, я могу объяснить, чего я хочу достичь через это уравнение container_width = no_of_thumb*(thumb_width+margin*2).

EDIT 3 - Как appears-

enter image description here

Как я хочу, чтобы это появле-

enter image description here

источник

2014-10-25 Vinayak Garg

не уверен, я понимаю, что вы пытаетесь достичь ... '.container' является автоматически центрируется бутстрапом (проверяйте его или дайте ему схему, и вы увидите). Также вы не должны вмешиваться в измерения и дополнения/поля ваших классов '.col-' ('.imgframe'), иначе вы разбиваете систему сетки! Возможно, изображение того, что вы пытаетесь достичь, может быть полезно ... – Pevara

@PeterVR: Пожалуйста, проверьте мой EDIT 2, если он сделает мою цель более ясной. –

euhm, нет, не совсем ... Ты всегда хочешь, чтобы все твои большие пальцы на одном ряду? Простой макет по-прежнему будет более полезен, я думаю ... – Pevara

Я думаю, вы непонимание, как работает самонастройки немного:

.container должен быть вашим самой внешней оболочкой, или вы могли бы использовать .container-fluid вместо
.col- классы определяют ширину и отступы/край блока, к которому они привязаны. Изнашивание этими значениями приведет к нарушению реакции. Используйте обертку внутри этих .col блоков, если вам нужно играть с размерами.
Почему вы позиционируете эти изображения абсолютными? Я не понимаю, чего вы пытаетесь достичь ...

Я пошел вперед и немного почистил вашу скрипку.Я думаю, что это может быть то, что вы после: http://jsfiddle.net/tn3j2kos/4/embedded/result/

HTML:

<div class="abc"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-6"> 
       <img class='img-responsive' src=#" /> 
      </div> 
      ....

CSS:

.abc { 
    background-color: #ffffcc; 
    padding: 0 4%; 
}

источник

2014-10-25 17:14:55 Pevara

просто установить .container в display: inline-block и вызвать text-align: center на .abc

FIDDLE

источник

2014-10-25 16:22:59 jmore009

Спасибо, это работает, если я правильно задал ширину для '.container'. Но если я изменил размер экрана так, что (скажем), только 2 эскиза видны в строке. Затем я хочу настроить ширину контейнера, чтобы группа выровнялась по центру. Другими словами, я хочу настроить 'container_width = no_of_thumb * (thumb_width + margin * 2)' –

Как центрировать контейнер бутстрапа внутри div?

ответ

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