Question

我在我的应用程序中使用bootstrap，现在遇到一个大问题。问题是.container元素在1360像素的屏幕上具有274px的左右边距，这是非常巨大的。结果，一切都被挤到了中心。某些页面上不存在此问题，而在其他页面上显示此问题时没有任何（对我来说清楚）原因。这是我的一段.container元素的代码。

<section id="rooms">
<div class="container">
    <div class="row">
        <div class="col-md-4 images">
            <div class="img-container">
                <a href="#">
                    <img src="img/rooms/family_one_bedroom.jpg"  class="img-responsive">
                    <div class="captions">
                        <div class="well">
                            <h3>Family One-Bedroom Executive Suite</h3>
                            <hr>
                            <p>On of the best options for families with children</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-4 images">
            <a href="#">
                <img src="img/rooms/three_bedroom_grand_suite.jpg"  class="img-responsive">
                <div class="captions">
                    <div class="well">
                        <h3>Three Bedroom Grand Suite</h3>
                        <hr>
                        <p>A huge option with amazing cityscape view</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4 images">
            <a href="#">
                <img src="img/rooms/family_one_bedroom.jpg" class="img-responsive">
                <div class="captions">
                    <div class="well">
                        <h3>Three Bedroom Grand Suite</h3>
                        <hr>
                        <p>Exquisite Interior And Modern Design</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 images">
            <a href="#">
                <img src="img/rooms/one_bedroom_garden.jpg" class="img-responsive">
                <div class="captions">
                    <div class="well">
                        <h3>One Bedroom Room With Garden View</h3>
                        <hr>
                        <p>A budget option for backpackers</p>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-6 images">
            <a href="#">
                <img src="img/rooms/delux.jpg" class="img-responsive">
                <div class="captions">
                    <div class="well">
                        <h3>Delux Room With Seaview</h3>
                        <hr>
                        <p>A luxury option with spectacular view of the coastline</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

我已经尝试通过以下方式将.container的边距设置为0：

.container {
   margin: 0!important;
}

但它只给了我左边的0和右边的巨大双边距

如何解决这个问题并获得双方的正常保证金？

Answer 1

请尝试以下操作。

.container {
   margin: 0 auto!important;
   width:95% !important;
}

Answer 2

我发现_grid.scss放置了一个max-width，它覆盖了width。设置max-width 100%将消除多余的利润。

.container {
    max-width:100%;
    margin:0px;
}

Answer 3

这很好地填满了页面...

<div class="container-fluid">
</div

具有不足的边距的Bootstrap .container元素

3 个答案: