2

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

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

谁能告诉我为什么文本框出现在 2 行上，即使它们的宽度看起来是正确的。这是输出的屏幕截图。 http://screencast.com/t/XEziHbs7X

我正在从 Foundation Grid 切换到 Bootstrap，因此我的布局可能存在其他一些问题，请随时指出它们。谢谢！

<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>
4

2 回答 2

0

新答案似乎是左边的边距打破了它。您可以使用 css 手动更改它（尽管您需要使用不同大小的媒体查询。一个例子是这样的

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

旧答案

您的控件行不是流动的，因此您希望输入为 span5，跨度 5 最多填充 10 而不是 12。非流动行加起来是它们的总空间，而不是 12。

于 2012-09-06T18:46:28.653 回答
0

正如@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>
于 2012-09-06T19:16:34.057 回答