對齊模式彈出框內的複選框

我正在使用Twitter Bootstrap，這已經基本無痛。對齊模式彈出框內的複選框

checkbox not aligned

複選框中的第一行不正確對齊：但是，我只是在一個模式彈出使用內聯複選框時遇到了以下問題。

需要注意的是，如果我刪除內聯屬性，這種情況持續下去：

有問題的代碼如下：

<div class="modal-body"> 
    <form class="form-horizontal"> 

     <div class="row-fluid"> 

      <div class="span4"> 

       <h4 style="display:inline !important;">Client: </h4> 

      </div> 

      <div class="span4"> 

       <h4 style="display:inline !important;">Start Date: </h4> 

      </div> 

      <div class="span4"> 

       <h4 style="display:inline !important;">End Date: </h4> 

      </div> 

     </div> 

     <br /> 

     <div class="row-fluid"> 

      <div class="span12"> 

       <h4 style="display:inline !important;">Industry: </h4> TBA 

      </div> 

     </div> 

     <br /> 

     <div class="row-fluid"> 

      <h4>Role: </h4> 

      <label class="checkbox inline"> 

       <input type="checkbox" value="2"> .NET Developer 

      </label> 

      <label class="checkbox inline"> 

       <input type="checkbox" value="1"> Business Analyst 

      </label> 

      <label class="checkbox inline"> 

       <input type="checkbox" value="14"> Change Manager 

      </label> 

      *SNIP* 
     </div> 

     <br /> 

     <div class="row-fluid"> 

      <div class="span12"> 

       <h4>Scope of Work (max. 150 words): </h4> 

       <textarea class="bdBox" rows="3"></textarea> 

      </div> 

     </div> 

     <br /> 

     <div class="row-fluid"> 

      <div class="span12"> 

       <h4>Deliverables (max. 150 words): </h4> 

       <textarea class="bdBox" rows="3"></textarea> 

      </div> 

     </div> 

    </form> 
</div>

縮短簡潔。

有沒有人有任何想法，或者我應該把它帶到引導問題列表？

來源

2012-04-17 joshschreuder

嗨shrodes，我想這是因爲單個複選框的寬度不同而發生的。正如我所見，您已將複選框放置在標籤元素內，請嘗試給單個標籤元素設定相同的固定寬度。你也可以嘗試float：left而不是display：inline .....只是一個猜測。希望它有幫助 – Mac 2012-04-17 07:16:00

想通了這一點。

有兩行bootstrap.css文件：

.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;} 
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}

底線只適用的利潤率左比第一其他複選框，這意味着第一個不跨越搞亂行推。

如果我將margin-left：10px移動到第一個複選框選擇器中，所有內容都排成一行。 Mac的CSS非常適合用於排列我的複選框： Fixed checkboxes

來源

2012-04-17 23:19:30 joshschreuder

你能澄清你的意思嗎？謝謝。 – noob 2012-12-20 15:05:25

@明，不知道這是否適用於後來的Bootstrap版本，但基本上我把margin-left：10px放到.radio.inline，.checkbox.inline選擇器中。 – joshschreuder 2012-12-20 22:14:25

這裏是什麼，我都試過，我想這是你想要的

http://jsfiddle.net/xgKP4/

來源

2012-04-17 07:44:27 Mac

謝謝，這是非常接近我想要的，但最上面的行仍然沒有對齊時，我把它放在模態。我認爲模式中有一種風格會毀了它，但我無法縮小它的範圍（它可以在單獨的頁面上正常工作，但不會在將其添加到模式中時使用）請參閱圖像：http：// i。 imgur.com/Hq6Hl.jpg） – joshschreuder 2012-04-17 23:05:28

對齊模式彈出框內的複選框

回答

相關問題