html - 带自举的Boxcontainer放置

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-md-9和col-md-3。

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

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

我希望我的boxcontainer填充col-md-9的全部空间，但是有这个空白我无法填充，我也不知道为什么。

我希望我足够清楚，因为英语不是我的母语，并且我仍然是编程的初学者。我很高兴听到您的建议。

Answer 1

看来您已经为“盒子”项目定义了边距。这意味着id =“ content”的div的宽度现在很小，可以容纳您的框项目及其边距。尝试删除任何边距