将元素与输入（而不是标签）对齐 - Bootstrap 3答案

【问题标题】：Align element with input (and not with label) - Bootstrap 3将元素与输入（而不是标签）对齐 - Bootstrap 3
【发布时间】：2017-08-07 06:03:56
【问题描述】：

在我的测试用例中，我将在列中对齐输入与其标签和超链接。问题是超链接与标签对齐，而不是与输入对齐：

代码如下：

       <div class="row">

            <div class="form-group col-xs-4">
                <label class="form__label" for="form__field__recipientId">CÃ³digo
                    beneficiario </label> <input class="form-control input-md col-xs-8"
                    id="form__field__recipientId" name="form__field__recipientId"
                    type="text" placeholder="Introduce ordenante">
            </div>

            <div class="form-group col-xs-4">
                <a class="form__side__hyperlink" href="">Buscar beneficiario</a>
            </div>

        </div>

我尝试了很多东西，主要是表单内联元素，但我认为我做得不对，因为我最终把事情搞砸了。

【问题讨论】：

总体来说，你希望链接和输入一致吗？
您真正想要得到什么？要将超链接与底部对齐（垂直）？
确实，这就是我要找的，@Swellar。

标签： html css twitter-bootstrap

【解决方案1】：

我会在目前的情况下这样做。希望这对您有所帮助。由于超链接是表单输入的一部分，所以我会将它放在一起，而不是将其放在另一个表单组中。

.form__side__hyperlink {
  position: absolute;
  left: 100%;
  bottom: 10px;
  /* or bottom 0 if you want it on the bottom */
  white-space: nowrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="form-group col-xs-4">
    <label class="form__label" for="form__field__recipientId">CÃ³digo  beneficiario </label>
    <input class="form-control input-md col-xs-8" id="form__field__recipientId" name="form__field__recipientId" type="text" placeholder="Introduce ordenante">
    <a class="form__side__hyperlink p-t-20" href="">Buscar beneficiario</a>

  </div>

</div>

【讨论】：

使用absolute定位并不是解决这个问题的好办法。它可能会导致响应式设计出现问题。所以更好的解决方案是改用flexbox。
我坚持这个答案，因为我可以更轻松地隔离这种元素（输入 + 超链接对齐）。

【解决方案2】：

希望对你有所帮助。

.row {
    display: flex;
    align-items: flex-end;
}

但是不要将它提供给.row，而是给它另一个类名并将样式仅应用于该特定类。

【讨论】：

这会搞砸一切。我不建议在 BS3 上使用它。
这就是为什么我要求为该 div 提供另一个类名并将样式赋予该特定类。
嗨，Abinthaha，我试过你的方法。虽然它成功了，但它确实弄乱了表单结构。我试图将 .row 类复制到 .flex__row 中，但仍会更改元素之间的间距。感谢 flex 值，不知道 :)
flex 是最新的 css3 显示属性。一旦你知道它，你就可以使用它创建任何结构。这就是它的优势。是的，当然，您的结构可能会搞砸。将flex-grow: 1 给直接孩子（在您的情况下为.form-group）。不要直接应用它，而是给它另一个类名并将样式应用到该类。