Question

我继承了网站的开发。我需要将Bootstrap输入表单更改为更紧凑的布局，因此我尝试修改代码以显示带有按钮组的内联标签（而不是按钮组）。我在这一方面失败了，我无法理解这种奇怪的行为。

以下代码（也可在https://jsfiddle.net/ewdt76zc/10/处获得）显示两种不同的形式。第一个显示标签下方的标签和三个按钮。在第二个我希望让标签和按钮组共享同一行。但它失败了，三个按钮被推到极右，真正最小化......奇怪！

我想实现以下布局：

Company: [ Apple ][ Microsoft ][ Google ]

出了什么问题，如何解决？

<p><i>(label above radio buttons)</i></p>
<form>
  <div class="form-group">
    <label>Company</label>
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default form-control">
        <input type="radio">Apple
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Microsoft
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Google
      </label>
    </div>
  </div>
</form>

<p><i>(label inline with radio buttons... buttons are compact to the right?)</i></p>
<form>
  <div class="form-group">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label>Company</label>
      <label class="btn btn-default form-control">
        <input type="radio">Apple
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Microsoft
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Google
      </label>
    </div>
  </div>

Answer 1

通过使用特定百分比，我们可以实现所需的布局。

为了演示目的，我创建了demo-1＆amp; demo-2个班级。为该类应用特定宽度百分比，并将该类附加到label＆amp; btn-group。

.demo1 {
  display: inline-block;
  float: left;
  width: 10%;
  padding-top: 4px;
}
.demo-2 {
  display: inline-block !important;
  float: left !important;
  width: 90% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p><i>(label above radio buttons)</i></p>
<form>
  <div class="form-group">
    <label>Company</label>
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default form-control">
        <input type="radio">Apple
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Microsoft
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Google
      </label>
    </div>
  </div>
</form>

<p><i>(label inline with radio buttons... buttons are compact to the right?)</i></p>
<form>
  <div class="form-group">
   <label class="demo1">Company</label>
    <div class="btn-group btn-group-justified demo-2" data-toggle="buttons">
     
      <label class="btn btn-default form-control">
        <input type="radio">Apple
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Microsoft
      </label>
      <label class="btn btn-default form-control">
        <input type="radio">Google
      </label>
    </div>
  </div>
</form>

Answer 2

尝试定义类＆＃34; form-inline＆＃34; （或＃34;形式水平＆＃34;）到您的单选按钮表单。

希望它可以帮助你。

Answer 3

您还可以Command使用display:flex并根据需要为您选择的标签添加保证金。希望它对你有所帮助。

form group

.form-group {
 display: flex;
}

label {
 margin-right: 20px;
}

尝试使用Bootstrap中的按钮组内嵌标签

3 个答案: