0

i have a problem with a horizontal scroll bar, it appears much earlier then it should be. At the jsfiddle you can see a lot of unused space to the right of the form that causing the problem, but i cant figure out why is that space there. (marked as red square on the screenshot). You can find all CSS that im using in jsfiddle.

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

4

1 回答 1

0

有一段以

@media (min-width: 1200px)

这就是问题开始的地方。出于某种原因，它会将 .article div 踢成某种类型的固定宽度。跟线有关系

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

禁用它可以让它再次全角。我不知道为什么，当给定一个 % 宽度时，它会变成固定宽度。

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

于 2013-05-01T06:39:30.470 回答