Question

我目前正在使用Bootstrap 4，并且试图将按钮与输入上下对齐的输入对齐。

如果我将按钮放置在form标签之外，那么它可以工作，但是我需要将其保留在那里，以便Javascript代码正常工作。

我尝试使用form-inline类，如果在输入上方只有一个标签，但是如果在其下方有另一个标签，则该按钮将停止与输入对齐。

要显示底部标签，您只需要在输入中键入一个字母，然后按Enter键，按钮将自行对齐。

我希望按钮始终与输入保持右对齐。

这是我的代码笔： https://codepen.io/rkcmorley/pen/Oeqvdv

这是html代码：

        <article>
            <div class="container">
                <div class="row searchSection">
                    <form id="searchForm" class="form-inline input-group input-group-lg">
                        <div class="col-lg-10 form-group align-self-start">
                            <label class="postcode">Zip Code</label>
                            <input type="text" name="text" autocomplete="off">
                        </div>
                        <div class="col-lg-2 form-group align-self-end">
                            <button type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </article>

Answer 1

您可以在按钮的div中添加一个空标签，以使其与字段对齐：

<div class="col-lg-2 form-group align-self-start">
  <label>&nbsp;</label>
  <button type="submit">Submit</button>
</div>

我在这里也使用了align-self-start，与字段的div中一样。

Answer 2

问题是您使用的是align-self: end，因此该按钮始终显示在div的底部。

即使您尝试将其更改为align-self: center，当只有顶部标签而没有底部标签时，它也无法正常工作：请参见图片：

有一个简单的解决方案：一旦顶部标签始终固定为24px的高度，您还可以固定按钮的位置。

要实现这一点，首先我删除了'align-self-end'类，并添加了具有样式的.fixed类：

.fixed { 
   display: block !important;
   margin-top: 24px;
} 

.fixed button { 
 line-height: 47px; //because line-height of input is 47px so it'll ethe same height
}

您可以看到this codepen进行检查。

如何将按钮与输入上方和下方的两个标签对齐

2 个答案: