Question

我刚刚开始使用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，但它们没有显示内联，请告诉我应该怎么做才能正确显示它们。

谢谢！

Answer 1

第二个div中的偏移量不是必需的：

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

检查this bootply。

Answer 2

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

这些是相互矛盾的。你做其中一个。实际上，如果它们应该排列在一起，那么两个值将与定义容器宽度的父级相等（col-md-6）。

Answer 3

<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时，这是你输入用户名的前一个div的偏移量6。

Twitter Bootstrap：行中错位的列

3 个答案: