Html 尝试将标签与引导中的按钮组内联放置

我继承了一个网站的发展。我需要将引导输入表单更改为更紧凑的布局，因此我尝试修改代码，以便显示与按钮组内联的标签，而不是在按钮组上。我这次失败了，我无法理解这种奇怪的行为

下面的代码也可在上获得，显示了两种不同的形式。第一个显示标签和标签下方的三个按钮。在第二个例子中，我希望让标签和按钮组共享同一行。但它失败了，三个按钮被推到了极右的位置，并且被最小化了。。。奇怪

我希望实现以下布局：

公司：[苹果][微软][谷歌]

出了什么问题，我该如何解决

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

---

尝试将类窗体内联或水平窗体定义到单选按钮窗体

希望它能对您有所帮助。

您也可以使用display:flex组成组，并根据需要为您选择的标签添加边距。希望对你有帮助

.表格组{ 显示器：flex； } 标签{ 右边距：20px； } 单选按钮上方的标签

公司 苹果 微软 谷歌 标签与单选按钮内联。。。右边的按钮是否紧凑

公司 苹果 微软 谷歌

---

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

为了演示，我创建了demo-1和demo-2类。将特定宽度（以百分比表示）应用于该类，并将该类附加到label&btn组

.demo1{ 显示：内联块； 浮动：左； 宽度：10%； 垫面：4px； } .演示-2{ 显示：内联块！重要； 浮动：左！重要； 宽度：90%！重要； } 单选按钮上方的标签

公司 苹果 微软 谷歌 标签与单选按钮内联。。。右边的按钮是否紧凑

公司 苹果 微软 谷歌