2013-10-26 31 views
1

在一定分辨率的时间几乎从1020px引导山坳,我都集中使用偏移不工作properly.How显示解决这个问题..引导山坳不是在页面的中心在调整

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

你可以创建一个拨弄你的代码 - > http://jsfiddle.net/ –

+0

对不起,我没能创造一个fiddle.we其中使用引导framework.its不是模板正在可能链接所有的CSS。实际上,我们使用col-md-6 col-md-offset-3在页面中心显示内容,但在调整屏幕大小时不能正常工作。 – user2089987

+0

什么是m-n和m-t类?可能与它有关... –

回答

3

除非您没有在示例中包括它,否则您缺少Bootstrap 101规则。

行必须放置在一个。容器正确对齐和填充。

根据您的示例,将<section>标记打包为<div class="container">将有所帮助。我无法复制您似乎遇到的任何问题,并且必须指出@kkern可能已经解决了问题,但未意识到堆栈示例中容器丢失。

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