Question

我有一个水平滚动条的问题，它出现的时间要早得多。在jsfiddle，您可以看到导致问题的表单右侧有很多未使用的空间，但我无法弄清楚为什么那个空间存在。（在屏幕截图上标记为红色方块）。你可以找到我在jsfiddle中使用的所有CSS。

HTML

<div class="container-fluid">
<section class="content">
    <div class="row-fluid">
        <div class="span10 article">
            <div class="block">
                <div class="section">
                    <h4>Online Application</h4>
                    <div class="row-fluid form-horizontal">
                        <div class="span6">
                            <div class="control-group">
                                <label class="control-label">First Name</label>
                                <div class="controls">
                                    <input type="text" name="contact_name_1">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Last Name</label>
                                <div class="controls">
                                    <input type="text" name="contact_name_2">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Email</label>
                                <div class="controls">
                                    <input type="text" name="contact_email">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Home Phone</label>
                                <div class="controls">
                                    <input type="text" name="contact_phone_home">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Cell Phone</label>
                                <div class="controls">
                                    <input type="text" name="contact_phone_cell">
                                </div>
                            </div>
                            <input type="button" value="Start Application" onClick="obertka25()">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section></div>

screenshot

Answer 1

有一节以

开头

@media (min-width: 1200px)

这就是问题出现的地方。由于某种原因，它将.article div踢成某种类型的固定宽度。它与行

有关

.row-fluid .span10 {
    width: 82.90598290598291%;
    *width: 82.8527914166212%;
}

禁用它允许它再次全宽。我无法弄清楚为什么，当给定％宽度时，它会变为固定宽度。

编辑：正文标记上有min-width样式，当我禁用时，我会看到.row-fluid .span10元素的正常宽度行为。我怀疑水平滚动条是由于那个

水平滚动条显得过早

1 个答案: