Question

使用webforms在asp.net中使用bootstrap创建嵌套列时，你会如何跨越整个孩子？

示例：

<div class="row">
    <div class="col-md-3">
        <div class="row">Stuff</div>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-6">
                stuff
            </div>
            <div class="col-md-6">
                stuff
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                stuff
            </div>
        </div>
    </div>
</div>

这是我的确切代码：

        <div class="row" style="margin-top: 5px">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon" id="">Destination City:</span>
                    <input type="text" class="form-control" id="DestinationCity" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon" id="">ETA:</span>
                    <input type="text" class="form-control" id="ETA2" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 5px">
            <div class="col-md-12">
                <div class="input-group">
                    <span class="input-group-addon" id="">B/L#:</span>
                    <input type="text" class="form-control" id="BL" runat="server" placeholder="" aria-describedby="basic-addon1">
                </div>
            </div>
        </div>

我正在尝试制作2列6列，其中包含12列。第二列不会跨越两个6的整个长度。

我认为我遗漏了一些关于Bootstrap3网格系统的基本信息。

图片链接： here

Answer 1

HTML完全符合您的要求...... 2列后跟1列横跨整个页面。你需要检查另一个div是否包装它导致它的行为不同。尝试评论你的开始和结束div，你会惊讶我们中的许多人感到困惑。

Answer 2

问题证明是Visual Studio放入Site.css的限制

    /* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

Stack Question

中的答案

Bootstrap 3制作嵌套行

2 个答案: