Question

在下面的代码中，我有2个按钮和3个标记输入。我希望按钮与输入对齐，但它们与标签对齐。我尝试使用内联表单，但是标签旁边没有。

在不破坏引导程序的情况下，最好的选择是什么？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</script>

<form role="form">
  <div class="row">
    <div class="form-group col-xs-1">
      <button type="button" class="btn btn-success btn-add">+</button>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-2">
      <button type="submit" class="btn btn-default">Filter</button>
    </div>
</form>

＆＃13;

Answer 1

由于您使用的是bootstrap，并且您可能不想过多地自定义CSS，除非您真的知道自己在做什么。

因此，尝试使用相同的结构，然后您将获得相同的结果，将<label> </label>添加到这些按钮作为占位符，因此它们的行为与屏幕更改相同。

同时将form-control添加到提交按钮并让bootstrap处理它：D

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form role="form">
  <div class="row">
    <div class="form-group col-xs-1">
      <label>&nbsp;</label>
      <button type="button" class="btn btn-success btn-add">+</button>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-2">
      <label>&nbsp;</label>
      <button type="button" class="btn btn-default form-control">Filter</button>
    </div>
  </div>
</form>

Answer 2

将display:inline-block应用于label和input应该允许它们流向同一行，但可能只需要display:inline

Answer 3

最快（而不是有点脏）的方式我可以想到这样做以适应Bootstrap将引入占位符标签，然后隐藏它们。但请注意，这是非常脆弱的 - 如果允许布局在宽度方向上过于压缩（或者如果允许标签文本换行），则仍会出现错位：

.invisible-label {
  visibility: hidden;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form role="form">
  <div class="row">
    <div class="form-group col-xs-1">
      <label class="invisible-label">&nbsp;</label>
      <button type="button" class="btn btn-success btn-add">+</button>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-2">
      <label class="invisible-label">&nbsp;</label>
      <button type="submit" class="btn btn-default">Filter</button>
    </div>
  </div>
</form>

无法将按钮与水平对齐（非内联）（Bootstrap）

3 个答案: