Javascript 引导列不适用于数据切换

我正在尝试设计一些单选按钮，使它们看起来像普通按钮。它们确实起作用，外观和行为都像常规按钮，但当我尝试将这些按钮放在3个不同的列（

col-sm-4，col-sm-4，col-sm-4

）中时，它无法“识别”或不确定它是什么…我尝试将这些列作为类放在

标签中，但它不起作用。像这样：

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

标签通常不会像那样用作包装器。它们用于向输入添加文本标签。我猜标签设置为
display:inline这可能会影响引导列布局

我稍微调整了html语法，并添加了div作为包装器。我还移动了
.formcontrol
类，对输入进行处理，这些输入可能也会造成混乱


别的
别的
别的
标签通常不用作那样的包装器。它们用于向输入添加文本标签。我猜标签设置为
display:inline这可能会影响引导列布局

我稍微调整了html语法，并添加了div作为包装器。我还移动了
.formcontrol
类，对输入进行处理，这些输入可能也会造成混乱


别的
别的
别的

.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);
 }

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