html - 带 Bootstrap 的 Boxcontainer 放置

标签 html css twitter-bootstrap-3

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

<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>  

现在,因为我想将我的 block 一分为二,所以我使用了 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 的整个空间,但有一个我无法填满的空白,我不知道为什么。

我希望我已经足够清楚了,因为英语不是我的母语,而且我还是编程的初学者。我很乐意听取您的建议。

最佳答案

您似乎已经为“盒子”项定义了边距。这意味着带有 id="content"的 div 的宽度现在很小,可以包含您的框元素及其边距。尝试删除任何边距

关于html - 带 Bootstrap 的 Boxcontainer 放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30287956/

相关文章:

javascript - jquery按类型和类获取html元素

javascript - 为什么我设置的超时不起作用?

javascript - Safari 4 和 5 中的硬件加速 CSS3 是否损坏,或者我的 CSS 和 JS?

jquery - 难以使用 Tapestry 区域 - 已更改 ID

css - Bootstrap 标签输入宽度

html - 如何在 bootstrap 3 中将 div 置于移动设备的中心?

css - 困难居中图片

css - 右对齐 div 的内容,同时保持输入字段中的文本方向为 ltr

jquery - Bootstrap Accordion 如何自动打开

jquery - 混合 Angularjs 和 Bootstrap 3 - 不兼容在哪里?