Question

我是一个bootstrap初学者，我正在创建这个Bootstrap网格的各种问题。我希望右边的文字保持原样，但我希望左边的图像在每一行都有两个。我不太喜欢我在这里出错的地方。

    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
            <div class="col-md-2">
                <img class="img-responsive" src="http://placehold.it/285x189" alt="">
            </div>
</div>
<div class="row">
            <div class="col-md-4">
                 <h3>Project Description</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
                 <h3>Project Details</h3>

                <ul>
                    <li>Lorem Ipsum</li>
                    <li>Dolor Sit Amet</li>
                    <li>Consectetur</li>
                    <li>Adipiscing Elit</li>
                </ul>
            </div>
        </div>
    </div>
</div>

JSFiddle：https://jsfiddle.net/5d430t93/1/

想象文本/图像将与此类似地对齐：http://www.dota2.com/store/itemdetails/11393?r=d0

Answer 1

您需要使用内部行来包含图像：

请使用此技术查看更新的jsfiddle：

https://jsfiddle.net/5d430t93/4/embedded/result/

container
    row
        col-8 (left side)
            row
                col-6 (first image)
                col-6 (second image) ...
        col-4 (right side)
            your text

Answer 2

hufflapuff，您问您是否可以获得与您提供的链接中的网站类似的结果如果您希望此功能完全响应，因为您并不知道有人会使用哪种设备来查看您的网站您需要涵盖所有选项 Bootstrap只会占用你的大部分时间，然后你仍然需要使用一些自定义的css来完全响应控制。

此 Fiddle 中的示例将帮助您了解如何开始使用bootstrap。（基本方式）
确保当您使用自己的图像时，它们的大小全部为宽度和高度相同。如果一个图像只有一个像素高，它将导致一个问题，并在另一个图像上迷上它并且它不会流动...在调整大小时向下移动。

要了解这是如何正常工作的，请抓住窗口的一侧并调整其大小，这样您就可以看到某些div如何改变大小。查看代码，了解原因和原因等希望这有助于您入门。

这只是下面的示例。

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="http://cdn.dota2.com/apps/570/icons/econ/loading_screens/storm_spring_loadingscreen.f581055d5d2479082991d67c26a04d0d91506071.png" class="img-responsive block">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="http://cdn.dota2.com/apps/570/icons/econ/loading_screens/dreamleague_vindictive_loadingscreen.4c57c8398415be2acb0ba6e4004dff31b51816bc.png" class="img-responsive block">
</div>

Bootstrap初学者：网格问题

2 个答案: