Twitter bootstrap 如何使用Twitter引导在嵌套的fluid布局中的一行上放置2个文本输入？

我正在尝试创建一个布局，让我的文本框填充它们所在的列。在这个例子中，我有一个“ContactBlock_LastName”和“ContactBlock_LastName”。我希望他们出现在同一行中，每个人占他们所在行的50%

正如您从下面的代码中看到的，我使用的流体行具有一个高级别容器（2 x 10列）。在span10中，我有我的控制组，我将其拆分，使每个输入有6列（因为我使用的是流体布局，嵌套行应始终添加到12）

有人能告诉我为什么文本框显示在两行上，即使它们的宽度看起来正确。下面是输出的屏幕截图

我将从基础网格切换到引导程序，所以我的布局可能还有其他问题，可以自由地指出它们。谢谢

<div class="container">
    <div class="row-fluid">
        <div class="span2">
            <h3>
                Left Nav</h3>            
        </div>
        <div class="span10">
            <form>
            <h3>
                Body</h3>
            <div class="row-fluid">
                <div class="span6">
                    <h4>
                        Column A</h4>
                    This is just same plain text. This is just same plain text. This is just same plain
                    text. This is just same plain text. This is just same plain text. This is just same
                    plain text. This is just same plain text. This is just same plain text. This is
                    just same plain text. This is just same plain text.
                </div>
                <div class="span6">
                    <h4>
                        Column B</h4>
                    This is just same plain text. This is just same plain text. This is just same plain
                    text. This is just same plain text. This is just same plain text. This is just same
                    plain text. This is just same plain text. This is just same plain text. This is
                    just same plain text. This is just same plain text.
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">
                    Name<span class="required">*</span></label>
                <div class="controls controls-row">
                    <input class="span6 required" id="ContactBlock_FirstName" name="ContactBlock.FirstName"
                        placeholder="First Name" type="text" value="" />
                    <input class="span6 required" id="ContactBlock_LastName" name="ContactBlock.LastName"
                        placeholder="Last Name" type="text" value="" />
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    Save</button>
                <a href="#" class="btn">Cancel</a>
            </div>
            </form>
        </div>
    </div>
</div>

左导航
身体
A列
这只是相同的纯文本。这只是相同的纯文本。这是同样的道理
文本这只是相同的纯文本。这只是相同的纯文本。这是一样的
纯文本。这只是相同的纯文本。这只是相同的纯文本。这是
只是相同的纯文本。这只是相同的纯文本。
B栏
这只是相同的纯文本。这只是相同的纯文本。这是同样的道理
文本这只是相同的纯文本。这只是相同的纯文本。这是一样的
纯文本。这只是相同的纯文本。这只是相同的纯文本。这是
只是相同的纯文本。这只是相同的纯文本。
名字*
拯救

新答案 似乎是左边的边距打破了它。您可以使用css手动更改此设置（不过，您需要对不同的大小使用媒体查询

#ContactBlock_LastName
{
   margin-left:0px;  /* or whatever value you think looks best */
}

旧答案 您的控件行不是流动的，因此您希望输入为span5，span 5填充到10，而不是12。非流动的行加起来就是它们的总空间，而不是12。

新答案 似乎是左边的边距打破了它。你可以用css手动更改它（不过你需要使用不同大小的媒体查询。示例如下

#ContactBlock_LastName
{
   margin-left:0px;  /* or whatever value you think looks best */
}

旧答案

---

您的控件行不是流动的，所以您希望输入的值是span5，span 5填充到10，而不是12。非流动的行加起来就是它们的总空间，而不是12。

正如@ben336所提到的，这看起来是个问题，因为控件行不是流动的。他的建议应该可以很好地工作。我决定暂时使用这个。。。请随时建议对此答案进行修改

    <div class="row-fluid control-group">
        <label class="control-label">
            Name<span class="required">*</span></label>
        <div class="controls">
            <div class="span6">
                <input class="span12 required" id="ContactBlock_FirstName" name="ContactBlock.FirstName"
                    placeholder="First Name" type="text" value="" />
            </div>
            <div class="span6">
                <input class="span12 required" id="ContactBlock_LastName" name="ContactBlock.LastName"
                    placeholder="Last Name" type="text" value="" />
            </div>
        </div>
    </div>

名字*

正如@ben336所提到的，这看起来像是一个问题，因为控件行不流畅。他的建议应该可以很好地发挥作用。我已经决定暂时使用此选项……请随时建议对此答案进行更改

    <div class="row-fluid control-group">
        <label class="control-label">
            Name<span class="required">*</span></label>
        <div class="controls">
            <div class="span6">
                <input class="span12 required" id="ContactBlock_FirstName" name="ContactBlock.FirstName"
                    placeholder="First Name" type="text" value="" />
            </div>
            <div class="span6">
                <input class="span12 required" id="ContactBlock_LastName" name="ContactBlock.LastName"
                    placeholder="Last Name" type="text" value="" />
            </div>
        </div>
    </div>

名字*

这似乎不正确。如果我使用span5，则文本框的宽度与上面的列不匹配。如此屏幕截图所示……有趣的是，我以前从未混合过流体和非流体碎片。我现在正在玩它，它似乎是左侧的边距打破了它。如果将输入的左侧边距设置为0，它就会工作sAgreed。我想我不会使用控件行。如果我将每个输入放在自己的行中，然后使用“.span12”作为输入控件，它会按需要呈现。这两种方法都不理想：（感谢您查看它！这似乎不正确。如果我使用span5，则文本框的宽度与上面的列不匹配。如此屏幕截图所示……有趣的是，我以前从未混合过流体和非流体碎片。我现在正在玩它，似乎是左侧的边距打破了它。如果您将边距设置为左侧，则对0的输入是一致的。我想我不会使用控件行。如果我将每个输入都放在自己的行中，然后使用“.span12”作为输入控件，它会按需要呈现。这两种情况都不理想：（感谢您的研究！