引導中心臥式成形

我想在中心英雄機的水平形式，通過設置text-align:center;，然後display:block-inline;引導中心臥式成形

見的jsfiddle用於演示http://jsfiddle.net/bVJZ2/

但是，這並沒有完全在工作複選框和提交按鈕不再正確對齊。任何建議如何解決這個問題？

來源

2013-02-25 penguin

沒有雅檢查我的答案，它幹什麼笏你打算這樣做。 – Shail 2013-02-27 03:12:59

有一些問題不允許您將複選框居中。

<div class="controls">有一個margin-left。你不應該把你的複選框放在一個div中。

input[checkbox]有一個float: left。您應該刪除該浮動：

.radio input[type="radio"], .checkbox input[type="checkbox"] { 
    float: none; 
}

該複選框是錯誤對齊的。您應該將vertical-align: top添加到最後一個選擇器。

綜上所述：

HTML：

<div class="control-group"> 
    <label class="checkbox"> 
     <input type="checkbox"> Remember me 
    </label> 
    <button type="submit" class="btn">Sign in</button> 
</div>

CSS：

.radio input[type="radio"], .checkbox input[type="checkbox"] { 
    float: none; 
    vertical-align: top; 
}

您可以在這裏看到的結果：http://jsfiddle.net/GW8zk/

來源

2013-02-25 20:59:46 Pigueiras

根據bootstrap文檔中的水平示例，我試圖在將它移動到中間位置之前複製外觀：http://twitter.github.com/bootstrap/base-css.html#forms 因此，如何將它們移回與輸入文本框對齊？ – penguin 2013-02-25 22:33:48

@penguin我不理解你。 – Pigueiras 2013-02-25 22:40:38

我試圖保持設計看起來與Bootstrap文檔中的水平表單示例相同。在你的修改中玩得更多，我已經能夠複製他們看起來像：http://jsfiddle.net/XpbV5/1/ – penguin 2013-02-25 23:20:52

那麼這就是你如何實現一個以中間爲中心的形式的英雄單位。

的jsfiddle與中心的形式http://jsfiddle.net/shail/YmmVS/

首先，CSS：

.hero-unit { 
padding:50px 50px 50px 50px; 
    } 
.form-horizontal .control-label { 
    width: 61px; 
    } 
.form-horizontal .controls { 
margin-left: 80px; 
    } 
    /* Landscape phones and down */ 
    @media (max-width: 480px) { 

    .hero-unit{ 
     margin-left:-20px; 
     margin-right:-20px; 
     } 
    .form-horizontal .controls { 
     margin-left: 0; 
     } 
    }

form HTML部分：

<div class="container"> 
<div class="hero-unit"> 
    <div class="row-fluid"> 
     <div class="offset4 span4"> 
      <legend>Sign in to WebApp</legend> 
      <form class="form-horizontal"> 
       <div class="control-group"> 
        <label class="control-label" for="inputEmail">Email</label> 
        <div class="controls"> 
         <input type="text" id="inputEmail" placeholder="Email"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="inputPassword">Password</label> 
        <div class="controls"> 
         <input type="password" id="inputPassword" placeholder="Password"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <div class="controls"> 
         <label class="checkbox"> 
          <input type="checkbox">Remember me</label> 
         <button type="submit" class="btn">Sign in</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
    </div> 
</div>

來源

2013-02-26 02:48:47 Shail

引導中心臥式成形

回答

相關問題