Bootstrap 使用长标签在同一行上对齐输入答案

【问题标题】：Bootstrap align input on same row with long labelsBootstrap 使用长标签在同一行上对齐输入
【发布时间】：2019-04-30 16:34:41
【问题描述】：

在同一行输入两个输入，例如下拉菜单，其标签较长且字符数量不同。它会导致输入下拉并与其同伴不对齐。添加中断不起作用，因为在某些宽度上它会对齐，而在其他宽度下它会包裹并下降。

表单有大约 100 个元素，因此每行一个会变得很长。

<form>
                 <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>This is question 1?</label>
                        <select size="0" class="form-control" name="typeOfEntity">
                            <option disabled selected>Select One...</option>
                            <option>answer 1</option>
                            <option>answer 2</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label>This is a really long question 2 that I need to ask?</label>
                        <select size="0" class="form-control" name="whyRegistering">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2,3,4,5 etc</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
</form>

这是一个显示问题的 jfiddle。调整屏幕大小并查看下拉菜单：https://jsfiddle.net/30mfgLde/

【问题讨论】：

如果它不会破坏您的布局，最简单的解决方案是将min-height 添加到标签中。根据您的字体大小和行高，您应该能够确定 2 行的近似高度（如果您认为文本量会那么长，则为 3）。我试过min-height: 50px，它适用于这个例子。

标签： html css twitter-bootstrap bootstrap-4 alignment

【解决方案1】：

您可以使用 flexbox 始终对齐底部的输入和顶部的标签。

.form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

【讨论】：

【解决方案2】：

你应该在你的行中使用 col-xs-* 或 md 。 form-control 类显示块，因为这是引导程序的工作方式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
     crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
     crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
     crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
     crossorigin="anonymous"></script>

    <div class="container">



        <form>
            <div class="form-row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-xs-6 col-md-6">
                            <label>This is question 1?</label>
                        </div>
                        <div class="col-xs-6 col-md-3">
                            <select size="0" class="form-control" name="typeOfEntity">
                                <option disabled selected>Select One...</option>
                                <option>answer 1</option>
                                <option>answer 2</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-8 col-md-6">
                        <label>This is a really long question 2 that I need to ask?</label></div>
                    <div class="col-xs-4 col-md-3">
                        <select size="0" class="form-control" name="whyRegistering">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2,3,4,5 etc</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="submit" class="col-xs-12 btn btn-primary">Submit</button>
        </form>


    </div>

https://codepen.io/anon/pen/dQgevq

【讨论】：