使用bootstrap进行箱式容器放置

Question

我一直在处理最近发生的一个问题，但我找不到解决它的方法。我是一个初学者，如果我的问题真的很简单，请原谅我。

<section class="container">
    <div class="row">
            <div class="col-md-8 text-left">
                <div id="filter">
                    <ul>
                        <li><a href="#" data-filter="*" class="selected"><i class="icon icon-reorder"></i> All Items</a></li>
                        <li><a href="#" data-filter=".cat1"><i class="icon icon-th-large"></i> Exemple</a></li>
                        <li><a href="#" data-filter=".cat2"><i class="icon icon-th-list"></i> Exemple</a></li>
                        <li><a href="#" data-filter=".cat3"><i class="icon icon-th"></i> Exemple</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 text-right">
                <div id="search">
                <p>Lorem Ipsum</p>
                </div>
            </div>
    </div>
</section>

<section class="container">
    <div id="content">
        <div class="row">
            <div class="col-md-9">
                <div class="boxportfolio3 item cat2 cat3">
                    <div class="boxcontainer">
                    <img src="../img.jpg" alt="">
                    <div class="roll">
                        <div class="wrapcaption">
                            <a href="projectdetail.html"><i class="icon-link captionicons"></i></a>
                            <a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
                        </div>
                    </div>
                    <h1><a href="projectdetail.html">Exemple</a></h1>
                    <p>
                         Exemple
                    </p>
                    </div>
                </div>
            <!-- box 2 -->
                <div class="boxportfolio3 item cat1">
                    <div class="boxcontainer">
                        <img src="../img.jpg" alt="">
                        <div class="roll">
                            <div class="wrapcaption">
                                <a href="projectdetail.html"><i class="icon-link captionicons"></i></a>
                                <a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
                            </div>
                        </div>
                        <h1><a href="projectdetail.html">Exemple</a></h1>
                        <p>
                             Exemple
                        </p>
                    </div>
                </div>
            <!-- box 3 -->
                <div class="boxportfolio3 item cat2 cat3">
                    <div class="boxcontainer">
                        <img src="../img.jpg" alt="">
                        <div class="roll">
                            <div class="wrapcaption">
                                <a href="projectdetail.html"><i class="icon-link captionicons"></i></a>
                                <a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
                            </div>
                        </div>
                        <h1><a href="projectdetail.html">Exemple</a></h1>
                        <p>
                             Exemple
                        </p>
                    </div>
                </div>
            <!-- box 4 -->
                <div class="boxportfolio3 item cat1">
                    <div class="boxcontainer">
                        <img src="../img.jpg" alt="">
                        <div class="roll">
                            <div class="wrapcaption">
                                <a href="projectdetail.html"><i class="icon-link captionicons"></i></a>
                                <a data-gal="prettyPhoto[gallery1]" href="../img.jpg" title="Exemple"><i class="icon-zoom-in captionicons"></i></a>
                            </div>
                        </div>
                        <h1><a href="projectdetail.html">Exemple</a></h1>
                        <p>
                             Exemple
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="text-side">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac velit luctus, pharetra magna eu, auctor purus.</p>
                </div>
            </div>
        </div>
    </div>
</section>  

现在，因为我想把我的块分成2块，所以我使用了col 9和col 3。

我得到的是：http://image.noelshack.com/fichiers/2015/20/1431873111-resultat.jpg

我所拥有和想要的是：http://image.noelshack.com/fichiers/2015/20/1431873148-attente.jpg

我想让我的盒子容器填满col md-9的整个空间，但是有一个空白我不能填充，我也不知道为什么。

我希望我说得够清楚了，因为英语不是我的母语，而且我还是个编程新手。如果能听到你的建议我会很高兴。

Answer 1

您似乎已经为您的“框”项定义了边距。这意味着包含id="content“的div的宽度现在变小了，无法包含框中的项和边距。尝试删除所有页边距