Bootstrap列不适用于数据切换
问题描述:
我试图设置一些单选按钮的样式,使它们看起来像常规按钮。他们的工作,看起来和行为作为常规按钮,但当我尝试将这些按钮放在3个不同的列(col-sm-4, col-sm-4, col-sm-4
)它不“确认”或不知道它是什么......我尝试将列作为一个类在label
里面,但它没有工作。就像这样:Bootstrap列不适用于数据切换
<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);
}
答
标签通常不使用这样的包装。它们旨在为输入添加文本标签。我猜测标签设置为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>
谢谢你的回答,但是nop。它没有工作=/ –
什么部分没有工作呢? –