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>