2013-10-26 59 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;"> 
    ........