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

我希望我的盒子容器能够填满col-md-9的整个空间，但是这个空白空间是我无法填写的，我不知道为什么。

我希望我很清楚，因为英语不是我的母语，因为我还是编程的初学者。我很高兴听到你的意见。

Answer 1

您似乎已为“盒子”商品定义了边距。这意味着id =“content”的div的宽度现在很小，以包含您的盒子项目及其边距。尝试删除任何边距

带有引导程序的Boxcontainer放置

1 个答案: