无法将按钮与水平形式对齐(非内联)(引导程序) [英] Can't align buttons with horizontal form (not inline) (Bootstrap)

问题描述

在下面的代码中，我有2个按钮和3个带标签的输入.我希望按钮与输入对齐，但它们与标签对齐.我尝试了内联表单，但是侧面没有标签.

In the code below I have 2 buttons and 3 labeled inputs. I want the buttons aligned with the inputs, but they are aligned with the labels. I tried inline forms, but having the labels on the side won't do.

在不过度破坏引导程序的情况下完成此操作的最佳选择是什么?

What's the best option to accomplish this without breaking bootstrap too much?

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

推荐答案

由于您使用的是引导程序，因此除非您真的知道自己在做什么，否则可能不想过多地自定义CSS.

Since you are using bootstrap and you might not want to customize CSS too much unless you really know what you are doing.

因此，尝试具有相同的结构，您将获得相同的结果，将<label>&nbsp;</label>作为占位符添加到这些按钮，以便它们的行为与屏幕更改相同.

Therefore, try to have the same structure then you will get the same result, add <label>&nbsp;</label> to those button as a placeholder, so they will behavior the same as screen changes.

还要在提交按钮上添加form-control并让引导程序处理:D

Also add form-control to the submit button and let bootstrap deal with it :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>

这篇关于无法将按钮与水平形式对齐(非内联)(引导程序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！