Question

我尝试创建一个<div>，在浏览器中显示9列水平宽度和高度，但目前<div>正确显示并正确对齐，但未居中

这是我的代码：

<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

您可以使用＆＃39; offset＆＃39;来偏移引导程序中的列。课程http://getbootstrap.com/css/#grid-offsetting

但由于9并不能平均分为12（即你不能通过col-md-1.5进行偏移），你最好在.container / .row /中创建自己的div类。 .col-md-12（根据您的布局要求决定）并将最大宽度设置为75％ - 颜色仅用于示例目的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

根据我的理解，请检查此解决方案是否有助于您

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

请增加整蛊屏幕宽度并检查，因为演示会很小并且不会应用lg-grid。

<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>

Bootstrap中心对齐不正确

2 个答案: