2014-03-07 75 views
2

我是Bootstrap的新手,我遇到了一個問題,因爲我想在塊樣式和另一個表單組旁邊顯示一個選擇框。Bootstrap Form-Group Inside Form-Inline

這是我的代碼

<div class="form-inline> 
    <div class="form-group"> 
     <label for="EventType">Event Type</label> 
     <select class="form-control"> 
     <option value="0">0</option> 
     <option value="1">1</option> 
     </select> 
    </div> 

    <div class="form-group"> 
     <label for="exampleInputFile">File input</label> 
     <input type="file" id="exampleInputFile"> 
    </div> 
</div> 

電流輸出是 Current Output

我的願望輸出是顯示內聯方法既形式組類的div。但是目前的輸出結果顯示所有內聯,而不是唯一的div。有什麼方法可以這樣做嗎?

回答

2

如果可能的話寫HTML作爲後續

<form class="form" role="form"> 
    <div class="form-inline> 
     <div class="form-group"> 
      <label for="EventType">Event Type</label> 
      <select class="form-control"> 
       <option value="0">0</option> 
       <option value="1">1</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputFile">File input</label> 
     <input type="file" id="exampleInputFile"> 
    </div> 
</form> 

用戶還可以用您所提供的HTML做到這一點。在這種情況下,你必須寫一些自定義CSS如下 -

.form-group{ 
    display:block; 
    clear:both; 
    width:100%; 
} 
+0

我雖然這會覆蓋現有的CSS? –

+0

不,只需在窗體中放置一個ID併爲此ID寫入CSS即可。 我的建議是使用我首先提供的HTML格式。這將符合學士學位的說法。 – WebDevRon