Question

为什么在以下Bootstrap 3.0示例中，当我缩小浏览器的宽度时，右侧面板会完全隐藏表单？

<div class="row">
<div class="col-sm-9">
    <h2>Product selection</h2>
    <p>Some text</p>
    <hr />
    <form action="/Store" class="form-horizontal" id="productForm" method="post" role="form">
        <div class="form-group">
            <label class="col-md-2 control-label" for="Quantity">Quantity</label>
            <div class="col-md-10">
                <input class="form-control" id="quantity" name="quantity" onchange="this.form.submit();" type="text" value="1" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input name="nextButton" type="submit" class="btn btn-default" value="Next" />
            </div>
        </div>
</form>
</div>
<div class="col-md-3" style="margin-top: 20px">
    <div class="panel panel-default">
        <div class="panel-heading">Your Options</div>
        <div class="panel-body">
            <p style="line-height: 200%">
                <a href="#">Other ways to buy</a><br/>
            </p>
        </div>
    </div>
</div>

以下是对所发生情况的实时测试：

http://www.bootply.com/R4FsSHI4af

要重现它，您只需缩小浏览器窗口的宽度即可。

感谢。

Answer 1

您正在将col-sm-9与col-md-3混合。只需使用一种尺寸，例如col-md-9和col-md-3。

Answer 2

请改用此结构：

<div class="row">
    <div class="col-md-9">
        <!-- Content -->
    </div>

    <div class="col-md-3">
        <!-- Panel -->
    </div>
</div>

当你正在混合col-sm-9和col-md-3时，你已经得到了：

小型设备上的12-12模式
中型设备上的9-12模式：重叠
大型和超大型设备上的9-3模式

在Bootstrap 3.0中调整大小后重叠列

2 个答案: