將元素與輸入（而不是標籤）對齊 - 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

回答

相關問題