containers - Bootstrap .container 元素的边距不够大

Question

我在我的应用程序中使用 Bootstrap ，现在遇到了一个大问题。问题是 .container 元素在 1360 px 的屏幕上具有 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;
}