Блог

Я только начал использовать Bootstrap и пытаюсь что-то написать с его помощью.

Пока все получалось отлично, но только одна проблема, которую я не могу решить после 3 часов или попыток.

Я пытаюсь создать страницу входа в систему, где текстовое поле имени пользователя и поле ввода пароля находятся в одной строке, я разделил их на 2 вертикальных столбца, чтобы помочь выровнять элементы, но почему-то два вертикальных столбца не могут находиться в одной строке, даже если они расположены под одним и тем же .row

Скриншот здесь:

http://i.stack.imgur.com/jB8cd.png

Извините за недостаточную репутацию для публикации изображения … извините за беспокойство

Вот соответствующий HTML-код:

         <!-- Login Form and Button -->
        <div class="container-fluid" id = 'login'>
            <div class='row'>
                <div class= 'col-md-3 col-md-offset-3 login-form'>
                    <div>
                        <h4><strong>Login</strong></h4> 
                        <input class = 'textinput' type="text" placeholder='User Name'>
                    </div>
                </div>

                <div class ='col-md-3 col-md-offset-6 login-form login-right'  >
                    <div col id='remember'>
                        <input type='checkbox' name = 'remember-me'value = 'Remember'><em style='color:white;'>Remember me</em>
                    </div>
                    <input class = 'textinput' type="password" placeholder='Password'>
                    <br><br>
                    <div id = 'login-button' class = 'pull-right'>
                    <button type="submit" class="btn btn-default">Login</button>
                    </div>
                </div>
            </div>

        <!-- Login Button -->
        </div> <!-- Close Login Form-->
 

И соответствующий код CSS:

 .textinput{
    width: 100%;
    height: 2em;
    border-radius: 3px;
}

.btn-default {
    width: 6em;
    font-weight: bold;
    color: white;
    background-color: #67462f;
    border-color: #67462f;
}
 

——————————TL; DR——————————-

Я поместил два col-md-3 div в строку, но они не отображаются в строке, пожалуйста, скажите мне, что я должен сделать, чтобы они отображались правильно.

Спасибо!

Смещение в вашей секунде div не требуется:

 <div class='col-md-3 login-form login-right'>
 

Проверьте это bootply.

 col-md-3 col-md-offset-6
 

Они конфликтуют. Вы делаете то или другое. Реально, если бы они выстроились вместе, это были бы два равных значения (col-md-6) с родительским параметром, определяющим ширину контейнера.

<div class ='col-md-3 col-md-offset-6 login-form login-right' > должно быть <div class ='col-md-3 col-md-offset-3 login-form login-right' > , потому, что этот div и div раньше добавляются в одну строку, и когда у вас есть col-md-offset-6, это смещение 6 от предыдущего div, где вы вводите имя пользователя.