Bootstrap：如何以水平形式将标签移动到输入的右侧？

Question

好吧，我尝试使用Bootstrap在输入的右侧设置标签，但我无法管理它。 我在互联网上搜索并尝试了几段代码，但没有任何作用......

在此link标签位于右侧，但我不知道如何操作。

Fiddle code

unpersist

Answer 1

输入后只需放置标签即可。像：

<div class="col-sm-6">
    <input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
</div>
<label class="col-sm-4 control-label" for="textinput">Right Align</label>

Answer 2

Something like this ?。只需在输入后放置标签，然后将其对齐到左侧。

// Mandatory plunkr code

Answer 3

的解决方案

我已对您的代码进行了编辑，以便内联显示标签和输入： Fiddle 。

的说明

<强> 1。使用Bootstrap Grid优势！

我看到你的标记的第一个问题是你的兄弟节点（输入Div和Label）类不能加起来12.在Bootstrap中，所有相关的html节点（标签）必须加起来 12 < / strong>如果您希望它们同样填充Bootstrap网格。

在小提琴中，您会看到我编辑了您的标签和输入Div以符合此规则（4 + 8 = 12）：

<!-- Text input-->
  <div class="form-group">
    <label class="col-xs-4 col-sm-4 col-md-4 control-label" for="textinput">Left Align</label>
    <div class="col-xs-8 col-sm-8 col-md-8">
      <input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
    </div>
  </div>

<强> 2。 Col类型很重要！

您会在我的HTML中看到，我有col-*-#个类的不同用法。这些确定了视口大小的列网格断点。示例：col-xs-12。您可以将类结构视为：column - viewport size (xs = extra small) - how many columns to take up (12 columns)。

Here's 这是一个简单但很棒的视觉效果，用于查看您可以生成的不同列跨度。

您最有可能将JS Fiddle Results窗口视为右下角的小方框。因为它是如此小的视口，所以您需要使用与其分辨率范围匹配的类：col-**xs**-#。 xs 表示Bootstrap网格布局中的最小设备范围。

您可以添加多个col类来处理收缩/扩展视口。在我的小提琴中，尝试扩展和缩小“结果”框。你会看到它试图保持输入和标签内联，即使这意味着元素本身开始看起来很奇怪。

如果您从输入/标签配对中删除col-sm-4 / col-sm-8，则从小结果框扩展时会看到格式突然中断。

<强>参考

<强> 1。教程

那里有很多教程，但我喜欢 Derek Banas's 直接发送。

<强> 2。 Bootstrap Docs

转到来源！ Here's 一些Bootstrap自己的网格系统文档。 *注意：提供的链接是针对Bootstrap 4的，但我们讨论的基本网格类没有太大变化。