對齊在兩個不同的列

Question

我工作的地方有3個複選框顯示器上的複選框和文本。當其中一個複選框被觸發時，應出現消息或輸入字段。我得到的那部分工作，但該複選框，消息沒有對齊，如下圖所示下面

正如你可以看到「Ondertiteling」複選框未與文本對齊「Ondertitel啓用」。

這是我的代碼（該消息的ommitted對問題的緣故再次觸發）

.checkbox { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.checkbox label { 
 
    min-height: 20px; 
 
    padding-left: 20px; 
 
    margin-bottom: 0; 
 
    font-weight: normal; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <div class="container"> 
 
    <div class="col-lg-12"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title"> 
 
         <span>Aanvraag #1</span> 
 
         <i class="fa fa-remove pull-right icon-clickable"></i> 
 
        </h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <div class="row"> 
 
        <div class="col-lg-3"> 
 
         <div class="checkbox"> 
 
          <label> <input type="checkbox">Ondertitels</label> 
 
         </div> 
 
         <div class="checkbox"> 
 
          <label> <input type="checkbox">Vertaling</label> 
 
         </div> 
 
         <div class="checkbox"> 
 
          <label><input type="checkbox">Voice-overs</label> 
 
         </div> 
 
        </div> 
 
        <div class="col-lg-9"> 
 
         <div>Ondertitel enabled</div> 
 
         <div>Vertaling enabled</div> 
 
         <div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

我該如何調整文本在同一高度的複選框？提前致謝。

Answer 1

我會問到變化您的標記修復形式，使得自舉處理它爲我們。更改標記爲行像這樣：

<div class="row"> 
     <div class="col-lg-3"> 
     <div class="checkbox"> 
      <label><input type="checkbox">Vertaling</label> 
     </div> 
     </div> 
     <div class="col-lg-9"> 
     <div class="checkbox">Vertaling enabled</div> 
     </div> 
    </div> 

觀看演示如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-lg-12"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h3 class="panel-title"> 
 
      <span>Aanvraag #1</span> 
 
      <i class="fa fa-remove pull-right icon-clickable"></i> 
 
     </h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 
      <div class="checkbox"> 
 
       <label><input type="checkbox">Ondertitels</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-9"> 
 
      <div class="checkbox">Ondertitel enabled</div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 
      <div class="checkbox"> 
 
       <label><input type="checkbox">Vertaling</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-9"> 
 
      <div class="checkbox">Vertaling enabled</div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-lg-3"> 
 
      <div class="checkbox"> 
 
       <label><input type="checkbox">Voice-overs</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-9"> 
 
      <div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你可能搜索只是改變line或字體高度在LG9 DIV答案

或只使用一個列，使用複選框和標籤具有一定寬度

Answer 3

嗯，你的問題的解決方案是創建三個獨立的行和一行跨越總共12列，爲此您將使用3作爲一個複選框，其他使用您的通知或消息。 因此，每個消息和複選框將在容器或行類中捆綁在一起。 將提供代碼不久，如果你不明白我想說

Answer 4

從CheckBox類中刪除10px的邊距或將其添加到othediv。我認爲這是造成你的抵消的原因。 :)

Answer 5

好了，所以你只需要margin-top: 10p x和margin-bottom: 10px添加到您的div的col-lg-9