Question

我想将输入与标签，没有标签的按钮对齐，使用带默认形式的bootstrap v3（垂直，而不是表格的水平布局）。

期望效果：http://screencast.com/t/b2uwBopW9rW

我设法通过在标签内创建具有不间断空格的标签来解决这个问题，但我想知道是否有更干净，更好的方法来实现这种效果。

关于jsfiddle的例子： https://jsfiddle.net/r6o5hysk/1/

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

感谢您的时间。

Answer 1

添加边距不是最好的主意。如果label font-size发生变化怎么办？您还需要调整margin。

让button充当block

＆＃13;

.btn.btn-as-block {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class="row">

    <div class="col-xs-9">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" />
      </div>
    </div>

    <div class="col-xs-3">
      <div class="form-group">
        <label>&nbsp;</label>
        <div class="btn btn-danger btn-as-block">Remove</div>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

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>

示例：https://jsfiddle.net/r6o5hysk/2/

Answer 3

检查一下，不需要额外的div或 。

我只为名称保留<label>字段，因为逻辑上输入字段不是标签。

不需要div <div class="form-group">它只是应用额外的保证金。

我在按钮上添加了一个类对齐，并设置margin-top以对齐。

＆＃13;

.alignment
{
    margin-top:25px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container' style='width:200px; margin: 50px;'>
    <div class="row">
      <div class="col-xs-10">
            <label>
                Name
            </label>
			<input type="text" class="form-control" />
      </div>
      <div class="col-xs-2">
            <div class="btn btn-danger alignment">Remove</div>
      </div>
    </div>
</div>

＆＃13;

Answer 4

您实际上只需将label放在form-group之外。要克服form-group添加display:inline-block对元素的响应行为。已向marge-left添加了button，以便在input和button之间创建差距。

.forceInlineBlock {
   display: inline-block; 
}
.addLeftMargin25 {
    margin-left: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <label for="name">Name</label><br />
  <div class="form-group forceInlineBlock">
    <input type="text" class="form-control" id="name"  />
  </div>
  <button class="btn btn-danger addLeftMargin25">Remove</button>
</form>

Answer 5

我知道OP很久以前问过BS3，但是对于那些偶然发现此线程并正在寻找BS4解决方案的人（如果您使用SCSS），可以使用以下代码创建mt-label mt-lg-label ...等类并在没有标签的控件上使用它们

@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);
        }
    }
}

只要您的标签继承了正文的font-size和line-height（默认情况下，它们在BS4中是这样做的），并且您使用变量增加了font-size（就像您应该赞扬的那样），它将说明字体-大小变化。

Answer 6

也许这有点晚了，因为OP是从2015年开始的，但是无论如何，它对于使用最新Bootstrap 4.3.1的人来说可能很有用。

实际上，您不需要使用任何额外的CSS或进行任何类型的复杂调整，只需利用row，form-row，col类如何并排运行以及如何使用它们的padding和margins彼此共存就足够了。

这是您需要遵循的结构才能使其起作用：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <form>
    <div class="form-row">
      <div class="col-md-12">
        <label for="name">User data:</label>
        <div class="form-row">
          <div class="col-5">
            <input type="text" class="form-control" id="name" placeholder="Alex Ventura">
          </div>
          <div class="col-5">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">@</span>
              </div>
              <input type="text" class="form-control" placeholder="alexventuraio">
            </div>
          </div>
          <div class="col-2">
            <button type="submit" class="btn btn-primary">Contact</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

我希望它可以给遇到相同问题的其他任何人一个主意。这里是my pen，仅供参考。

Bootstrap，将输入与标签对齐到没有标签的按钮，垂直形式/不水平

6 个答案: