Неправильное выравнивание центра загрузки

Question

Я пытаюсь создать <div>, который отображает 9 столбцов в браузере с правильной шириной и высотой по горизонтали, но в настоящее время <div> s показаны правильно и правильно выровнены, но не центрированы.

Это мой код:

<div class="row"> 
    &nbsp; 
    <div class="col-lg-offset-2 col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: -11px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 13px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 12px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 13px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 16px;"> 
    </div> 
    <div class=" col-lg-1 col-md-6 col-xs-6 col-sm-4" style="margin-top: 16px;"> 
    </div> 
</div> 

Может кто-нибудь мне помочь?

Answer 1

Вы можете смещение столбцов в начальной загрузке с помощью «смещенных» классов http://getbootstrap.com/css/#grid-offsetting

Но как-не делит поровну на 12 (т.е. вы не можете компенсирован COL-MD-1.5) вы можете быть лучше, чтобы создать ваш собственный класс div внутри .container/.row/.col-md-12 (независимо от того, что вы решите в зависимости от ваших требований к макету) и установите максимальную ширину до 75% - цвета предназначены, например, для целей.

.container { 
 
    border: 1px solid red; 
 
} 
 
.mynewdiv { 
 
    max-width: 75%; 
 
    margin: 0 auto; 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="mynewdiv"> 
 
    <p>75% width div here</p> 
 
    </div><! --/.mynewdiv --> 
 
</div><!-- /.container -->

Answer 2

Из того, что я понял, пожалуйста, проверьте, если это решение поможет вам

https://jsfiddle.net/akshaybhende/DTcHh/6730/

Пожалуйста увеличить fidddle ширину экрана и проверьте, как демо будет небольшой и Л.Г. сетки не будет применяться.

<div class="row"> 
    <div class="col-lg-10 col-lg-offset-1 center-div"> 

    <div class="col-sm-4 inner"> 
     <div class="col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;">1 
    </div> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;">2 
    </div> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: -11px;">3 
    </div> 
     </div> 

    <div class="col-sm-4 inner"> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 10px;">4 
    </div> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 13px;">5 
    </div> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 12px;">6 
    </div> 

     </div> 

    <div class="col-sm-4 inner"> 

    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 13px;">7 
    </div> 
    <div class=" col-lg-4 col-md-6 col-xs-6 col-sm-4" style="margin-top: 16px;">8 
    </div>