引導窗體在移動視圖中不居中

Question

我試圖讓我的窗體在桌面上查看時居中，最重要的是當我在手機（如Ipad或iPhone）上查看窗體時。

這裏是我的表單代碼

 <div class="col-md-10 col-md-offset-1"> 
         <form class="form jumbotron-form"> 
          <div class="container"> 
           <h3 class="text-center">Find the Business Waiting For You!</h3> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <select class="form-control"> 
              <option value="">Industry</option> 
             </select> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <select class="form-control"> 
              <option value="">State</option> 
             </select> 
            </div> 
           </div> 

           <div class="form-group"> 
            <div class="text-center"> 
             <button type="submit" class="btn btn-default">Search</button> 
             <p><a class="search" href="#">Advanced Search</a></p> 
            </div> 
           </div> 
          </div> 
         </form> 

        <div class="overlay-detail text-center"> 
         <a href="#service"><i class="fa fa-angle-down"></i></a> 
        </div>  
       </div> 

正如你可以看到它是不是centerd有人可以幫我什麼即時做錯了。 這裏是鏈接到我的網站，即時通訊工作www.kevineperjesi.com/found6test

Answer 1

我建議您重新格式化您編寫的代碼，以便根據需要使用容器，行和列。每當你想要一個新的產品線時，無論如何，你都應該把它放在一排。如果你想讓2個項目能夠內聯，他們都應該在同一行。這是一個如何以乾淨的方式完成的例子。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <h3 class="text-center">Find the Business Waiting For You!</h3>  
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12 col-md-6"> 
     <div class="form-group"> 
      <select class="form-control"> 
       <option value="">Industry</option> 
      </select> 
     </div> 
     </div> 
     <div class="col-sm-12 col-md-6"> 
     <div class="form-group"> 
      <select class="form-control"> 
       <option value="">State</option> 
      </select> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group text-center col-xs-12"> 
     <button type="submit" class="btn btn-default">Search</button> 
     <p><a class="search" href="#">Advanced Search</a></p> 
     </div> 
     <div class="text-center col-xs-12"> 
     <a href="#service"><i class="fa fa-angle-down"></i></a> 
     </div> 
    </div> 
    </div> 

您可以極大地利用col-xs- *實用程序。

如果您使用col-xs-12 col-sm-12表示在xs和sm屏幕大小上，該列將跨越頁面上的所有12列。

你似乎希望在中等大小和更高的選擇是2，所以你可以把一個col-sm-12 col-md-6使得sm和更小，它將跨越所有12，和md和它只會跨越半。

Bootstrap使列非常簡單。這些文件做得很好，爲製作優秀的網站提供了很多有用的信息。祝你好運！

http://getbootstrap.com/css/包括網格系統的文檔。

Answer 2

嘗試使用引導CDN文件，看看那裏是實際的問題是：

http://getbootstrap.com/getting-started/#download

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="col-md-10 col-md-offset-1"> 
    <form class="form jumbotron-form"> 
    <div class="container"> 
     <h3 class="text-center">Find the Business Waiting For You!</h3> 
     <div class="col-md-6"> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option value="">Industry</option> 
      </select> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option value="">State</option> 
      </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="text-center"> 
      <button type="submit" class="btn btn-default">Search</button> 
       <p><a class="search" href="#">Advanced Search</a></p> 
      </div> 
     </div> 
    </div> 
    </form> 

    <div class="overlay-detail text-center"> 
    <a href="#service"><i class="fa fa-angle-down"></i></a> 
    </div>  
</div>