試圖定位我的按鈕中心屏幕與引導3

查找本網站上的各種文章和答案，其中似乎是使用<div class="text-center">的流行答案，但它並沒有爲我工作。該按鈕從屏幕的左側開始。任何想法如何可以完成 - 理想情況下保持它在bootstrap中，而不必在我的樣式表中添加新的類。謝謝。試圖定位我的按鈕中心屏幕與引導3

代碼，我現在的問題是：

   <div class="text-center"> 
        <%= image_tag 'logo_for_web.png' %> 
    <h3>Header here</h3> 

    <h4> 
        Text here 
    </h4> 

    <h4> 
        Text here 
    </h4> 

    <%= link_to "Sign up", '#', class: "btn btn-primary col-xs-11" %> 

    <%= link_to "Log in with Facebook", '#', class: "btn btn-primary col-xs-11" %> 
    <%= link_to "Log in with email", '#', class: "btn btn-primary col-xs-11" %> 
    <%= link_to "Use without signing up", '#', class: "btn btn-primary col-xs-11" %> 
    <%= link_to "About Us", { controller: "static_pages", action: "about"}, class: "btn btn-primary col-xs-11" %> 
    <%= link_to "Contact Us", '#', class: "btn btn-primary col-xs-11" %> 


</div>

來源

2014-02-21 CHarris

您應該使用網格，使它們對齊中心。 Bootstrap共有12個網格列。所以;

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <!-- Your Buttons Here --> 
    </div> 
</div>

來源

2014-02-21 00:10:08

感謝的是，我的專業我的應用程序的移動，所以我認爲COL-XS是比較合適的，對？無論如何，你把我放在正確的軌道上... – CHarris

是的; 'col-xs'會更合適。 – 2014-02-21 23:42:44

我用最終被（我的應用程序正在取得主要用於手機）：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-10 col-xs-offset-1 "> 
     <%= link_to "Log in with Facebook", '#', class: "btn btn-primary btn-lg btn-block" %> 
     <%= link_to "Log in with email", '#', class: "btn btn-primary btn-lg btn-block" %> 
     <%= link_to "Sign Up", '#', class: "btn btn-primary btn-lg btn-block" %> 
     <%= link_to "Use without signing up", '#', class: "btn btn-primary btn-lg btn-block" %> 
     <%= link_to "About Us", { controller: "static_pages", action: "about"}, class: "btn btn-primary btn-lg btn-block" %> 
     <%= link_to "Contact Us", '#', class: "btn btn-primary btn-lg btn-block" %> 
     </div> 
    </div> 
</div>

來源

2014-02-21 23:37:25 CHarris

試圖定位我的按鈕中心屏幕與引導3

回答

相關問題