Bootstrap列不適用於數據切換

Question

我試圖設置一些單選按鈕的樣式，使它們看起來像常規按鈕。他們的工作，看起來和行爲作爲常規按鈕，但當我嘗試將這些按鈕放在3個不同的列（col-sm-4, col-sm-4, col-sm-4）它不「確認」或不知道它是什麼......我嘗試將列作爲一個類在label裏面，但它沒有工作。就像這樣：

<div data-toggle="buttons" > 

       <label class="col-sm-4 btn btn-project-type"> 

         <input type="radio" name="project_type" class="form-control" >Web Site 

       </label> 

       <label class="col-sm-4 btn btn-project-type"> 

         <input type="radio" name="project_type" class="form-control" >Application 

       </label> 

       <label class="col-sm-4 btn btn-project-type"> 

         <input type="radio" name="project_type" class="form- control" >Something Else 

       </label> 

</div> 

所以，後來我嘗試創建<div data-toggle="buttons">內3列，但它不打標籤..

所有我想要的是把那些3個單選按鈕在3倍不同的列和使它們像單選按鈕一樣工作：

| | | | |按鈕1 |按鈕2 |按鈕3 | | | | |

這裏是我的CSS：

.btn-project-type{ 
border-color: $green; 
color:$white; 
width: 100%; 
background-color: $dark-grey; 
border: 1px solid $green; 
    } 

.btn-project-type:hover { 
    border-color: $green; 
    color: $white; 
    width: 100%; 
    background-color: $blue; 
    border: 1px solid $green; 

    } 

.btn.active, .btn:active { 
    background-color: $blue; 
    outline: 0; 
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
} 

Answer 1

標籤通常不使用這樣的包裝。它們旨在爲輸入添加文本標籤。我猜測標籤設置爲display: inline;，這可能會影響自舉col佈局。

我稍微調整了你的html語法，而添加div作爲包裝。我也對類別.form-control進行了抨擊，因爲這些內容可能也會混淆事物。 https://jsfiddle.net/gwfxd42t/

<div data-toggle="buttons" > 
    <div class="col-sm-4 btn btn-project-type"> 
    <label>Something Else</label> 
    <input type="radio" name="project_type"/> 
    </div> 
    <div class="col-sm-4 btn btn-project-type"> 
    <label>Something Else</label> 
    <input type="radio" name="project_type"/> 
    </div> 
    <div class="col-sm-4 btn btn-project-type"> 
    <label>Something Else</label> 
    <input type="radio" name="project_type"/> 
    </div>   
</div>