Twitter bootstrap 引导，将带标签的输入与不带标签的按钮对齐，垂直形式/非水平形式

我想将输入与标签对齐，使用BootstrapV3和默认表单（表单的垂直布局，而不是水平布局）来对齐没有标签的按钮

预期效果：

我设法解决了这个问题，创建了一个标签，标签内有不间断的空间，但我想知道是否有更干净、更好的方法来达到这个效果

JSFIDLE上的示例：

名称
去除

---

谢谢您的时间。

检查此项，无需额外的div或

我只保留了名称的

字段，因为从逻辑上讲，输入字段不是标签

不需要div

它只应用额外的边距

我在按钮上添加了一个类对齐，并设置

margintop

以对齐

.alignment
{
边缘顶部：25px；
}

名称
去除

实际上，您只需将

标签

放在

表单组

之外即可。要克服

表单组

的响应行为，请将

显示：内联块

添加到元素中。将

marge left

添加到

按钮

以在

输入

和

按钮

之间创建间隙

.forceInlineBlock{
显示：内联块；
}
.addLeftMargin25{
左边距：25px；
}

名称

去除

增加页边距不是最好的主意。如果

标签

字体大小

发生变化怎么办？您还需要调整

边距

使
按钮
充当
块


.btn.btn-as-block{
显示：块；
}

名称
去除
Bootstrap是一个很好的结构，您可以在其中创建任何类型的html，只要您需要了解该结构即可。始终尝试只使用引导类，而不使用外部类

使用所需的输出检查此仅引导结构

<div class='container' style='width:200px; margin: 50px;'>
  <div class="row">
    <div class="col-lg-12">
      <label>Name</label>
      <div class="row">
        <div class="col-xs-10">
          <div class="form-group">
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-xs-2">
          <div class="form-group">
            <div class="btn btn-danger">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


名称
去除

示例：
我知道OP（很久以前）询问BS3，但对于那些偶然发现此线程并正在寻找BS4解决方案的人（假设您使用SCS），您可以使用以下代码创建
mt label mt lg label…
etc类，并在没有标签的控件上使用它们

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .mt#{$infix}-label {
            margin-top: $label-margin-bottom + ($line-height-base * $font-size-base);
        }
    }
}

只要你的标签从正文中继承字体大小和行高（默认情况下在BS4中是这样），并且你使用变量增加字体大小（就像你应该做的那样），它就会考虑字体大小的变化。
也许这有点晚了，因为OP是从2015年开始的，但无论如何，它可能对使用最新版本的人有用

实际上，您不需要包含任何额外的CSS或进行任何类型的复杂调整，只要利用
行
、
表单行
、
列
类的并行行为以及其
填充
和
边距
如何共存就足够了

这是您需要遵循的结构，以使其正常工作：



用户数据：
@
接触
这与多个输入字段有关。这与列折叠的响应性布局有关。这打破了表单的响应性。与公认的解决方案相比，这是最佳解决方案。不再加载代码堆。您可以使用内置的.d-block类，而不是创建自己的类。令人毛骨悚然（形容词）：“令人不安，因为担心或引起对死亡的恐惧”。亚历克斯，现有的答案中哪一个让你害怕你会死？@AndreiGheorghiu很抱歉被夸大了，我只是想强调任何奇怪的或艰巨的技巧来完成它！；）如果第三个输入带有标签呢？也许我错了，但在我看来，这种方法并不是很灵活。它基本上是一个标签，所有其他内容都在一个不同的块元素中。@scrnjakovic你是对的，这可能不起作用，但我认为OP没有问你在问什么。对于OP要求的场景，这只是另外一种方法，就是这样。
@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .mt#{$infix}-label {
            margin-top: $label-margin-bottom + ($line-height-base * $font-size-base);
        }
    }
}