Bootstrap выравнивает ввод в одном ряду с длинными метками - PullRequest
Новая
       27

Bootstrap выравнивает ввод в одном ряду с длинными метками

0 голосов
/ 28 ноября 2018

Возьмите два ввода, например выпадающий список в одной строке с метками, которые длиннее и не имеют одинакового количества символов.Это приводит к тому, что ввод падает и не выравнивается с его компаньоном.Добавление разрыва не сработает, потому что при определенных значениях ширины оно выравнивается, а при других - оборачивается и опускается.

Форма содержит ~ 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/

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Вы должны использовать 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

0 голосов
/ 28 ноября 2018

Вы можете использовать flexbox, чтобы всегда выравнивать вход внизу и метку сверху. 

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