ブートストラップカラムがデータトグルで動作しない

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 | | | | |

.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

ラベルは、一般的にそのようなラッパーとして使用されていません。

は、ここに私のCSSです。それらは入力にテキストラベルを追加するためのものです。私はラベルが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>