Question

在几乎1020px的某个分辨率下，我使用偏移量居中的bootstrap col无法正常工作。如何解决此问题..

<section id="content" class="m-t-lg" style="margin-top:100px;"> 
   <a class="nav-brand" href="#">My Home page</a>
  <div class="row m-n">
    <div class="col-md-6 col-md-offset-3 m-t">

      <form class="m-t-lg" role="search" >
        <div class="input-group">
          <input class="form-control input-lg no-border bg-dark" type="text" placeholder="Search">
          <span class="input-group-btn">
          <button class="btn btn-lg btn-success" type="submit"> <i class="icon-search"></i> </button>
          </span> </div>
      </form>
      <center>
     <section class="panel-body">
      <div class="row m-n m-t"><h4 align="center">Heading1</h4>
        <ul class="pull-left">
          <li class="list-inline pull-left m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img" class="img-responsive"></a> </li>
          <li class="list-inline pull-left m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img" class="img-responsive"></a> </li>
          <li class="list-inline pull-left m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img" class="img-responsive"></a> </li>
        </ul>
      </div>
      </section>

              <section class="panel-body">
       <h4 align="center">Heading2</h4>

        <ul "pull-left">
          <li class="list-inline pull-left  m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img"></a> </li>
          <li class="list-inline pull-left  m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img"></a> </li>
          <li class="list-inline pull-left  m-r-sm"> <a href="#"><img src="images/img_2.png" alt="img"></a> </li>
        </ul>
        </section>

    </div>
  </div>
</section>

Answer 1

除非你没有将它包含在你的例子中，否则你错过了一个Bootstrap 101规则。

必须将行放在 .container 中才能正确对齐和填充。

根据您的示例，将<section>标记与<div class="container">包装起来会有所帮助。我无法复制您似乎遇到的任何问题，并且必须指出@kkern可能已经解决了问题而没有意识到您的堆栈示例中缺少容器。

<div class="container">
   <section id="content" class="m-t-lg" style="margin-top:100px;">
   ........

在调整大小时，bootstrap col不会显示在页面的中心

1 个答案: