html - 推特 Bootstrap : Misplaced Column in Row

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 .