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;，这可能会影响bootstrap 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>

Bootstrap列不适用于数据切换

1 个答案: