Question

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

该表单具有约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>

这是显示问题的小提琴。调整屏幕大小，然后看到下拉菜单消失：https://jsfiddle.net/30mfgLde/

Answer 1

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

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

Answer 2

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

<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

引导程序将输入与长标签对齐在同一行上

2 个答案: