太多空間

Question

我與引導形式水平工作，我不能發現爲什麼有我的標籤，我的表單組之間洙多的空間，看到

這是代碼我目前所面對的：

<div> 
     <h2 class="text-center"> Table Styles </h2> 
     <div class="form-group"> 
      <label for="rows" class="control-label col-md-3">current Styles:</label> 
      <div class="col-md-4"> 
       <select class="form-control" v-model="tableStyle"> 
        <option v-for="(item,index) in tableStyles"> 
         {{ item }} 
        </option> 
       </select> 
      </div> 
    </div> 

我有DIV上述形式的水平，因爲我與VUE工作是調用組件，請不要擔心:)

Answer 1

<div> 
     <h2 class="text-center"> Table Styles </h2> 
     <div class="form-group"> 
      <label for="rows" class="control-label col-md-2">current Styles:</label> 
      <div class="col-md-3"> 
       <select class="form-control" v-model="tableStyle"> 
        <option v-for="(item,index) in tableStyles"> 
         {{ item }} 
        </option> 
       </select> 
      </div> 
    </div> 

Answer 2

我一個片段p repared。它在代碼片段編輯器中正確運行，但保存時出錯。

您的代碼，修改或多或少像這樣，是工作正常。看代碼塊之後...

<form> 
    <div class="container"> 
    <div class="form-horizontal"> 
     <!-- Other stuff --> 

     <div> 
     <h2 class="text-center"> Table Styles (col-xs-)</h2> 
     <div class="form-group"> 
      <label for="rows" class="control-label col-xs-3">current Styles:</label> 
      <div class="col-xs-4"> 
      <select class="form-control" v-model="tableStyle"> 
      <option v-for="(item,index) in tableStyles">{{ item }}</option> 
      </select> 
      </div> 
     </div> 
     </div> 

     <!-- Other stuff --> 
    </div> 
    </div> 
    </form 

引導CSS的.form-horizontal .control-label應強制標籤，無論col-大小來右對齊。

@media (min-width: 768px) 
.form-horizontal .control-label { 
    padding-top: 7px; 
    margin-bottom: 0; 
    text-align: right; 
    } 

如果你用你的瀏覽器的開發人員工具，你應該確保你看到上面的CSS當你突出control-label