Bootstrap .container 元素的边距不够大答案

【问题标题】：Bootstrap .container element with inadequately huge marginsBootstrap .container 元素的边距不够大
【发布时间】：2017-06-24 02:26:29
【问题描述】：

我在我的应用程序中使用引导程序，现在遇到了一个大问题。问题是.container 元素在 1360 像素的屏幕上具有 274 像素的左右边距，这是相当大的。结果，一切看起来都挤到了中心。此问题在某些页面上不存在，而在其他页面上出现时没有任何（对我来说很清楚）原因。这是我的一段代码，用于包含.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，在右边给了我巨大的双倍边距

如何解决这个问题，让两边的边距正常？

【问题讨论】：

标签： containers margins

【解决方案1】：

请尝试以下方法。

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

【讨论】：

不幸的是没有影响
@Kirill 您是否尝试过为容器添加宽度。我已经在我的代码中更新了它。您可以改变宽度。
但是如果我设置宽度它会失去响应能力
@Kirill 如果您设置为百分比，则不会影响响应

【解决方案2】：

我发现_grid.scss 放置了一个max-width，它覆盖了width。制作max-width 100% 将消除任何多余的保证金。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：