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

在我的测试案例中，我可以在列中对齐输入及其标签和超链接。问题是，超链接被对齐的标签，而不是输入：将元素与输入（而不是标签）对齐 - Bootstrap 3

的代码如下：

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

我已经尝试了很多东西，主要形式，内联元素，但我不认为我做得正确，因为我最终搞乱了事情。

来源

2017-08-07 wickedchild

总之，你想要的链接是与输入线？ – Swellar

你真正想要得到什么？将超链接对齐到底部（垂直）？ – Abinthaha

的确，这就是我要找的@Swellar。 – wickedchild

我会在目前的情况下做到这一点。希望这可以帮助你。由于超链接是表单输入的一部分，因此我将它们放在一起而不是放在另一个表单组中。

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

来源

2017-08-07 06:17:08 Aslam

使用绝对定位不是解决此问题的好方法。这可能会导致响应式设计中的问题。所以更好的解决方案是使用'flexbox'来代替。 – Abinthaha

我坚持这个答案，因为我可以更容易地隔离这种元素（输入+超链接对齐）。 – wickedchild

我希望这可以帮助你。

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

但不是给它的.row，给它另一个类名和样式只适用于特定的类。

来源

2017-08-07 06:10:37 Abinthaha

这会弄乱一切。我不建议在BS3上使用它。 – Aslam

这就是为什么我要求为该div提供另一个类名并将样式赋予该特定类的原因。 – Abinthaha

嗨Abinthaha，我试过你的方法。虽然它的确有窍门，但确实弄乱了表单结构。我试图将.row类复制到.flex__row中，但仍然会更改元素之间的间距。感谢flex的价值，不知道:) – wickedchild

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

回答

相关问题