Twitter Bootstrap：行中的错位列答案

【问题标题】：Twitter Bootstrap: Misplaced Column in RowTwitter Bootstrap：行中的错位列
【发布时间】：2014-06-27 03:05:00
【问题描述】：

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

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap web alignment

【解决方案1】：

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

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

检查this bootply。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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。

【讨论】：