Question

我想构建一个可以加载11张图片的页面。

图像需要在第一行中为3，在第二行中为5，在第三行中为3。

这个图像很大，但是所有这些都应该在屏幕上看到，所以我尝试使用容器流体类的div，所以所有图像都填满了每个div col。

问题是即使设置高度和/或最大高度，或者每行设置33％，高度总是大于屏幕。

代码是：

<div class="container-fluid">
<div class="row">
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"></a>
    </div>
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <a href="\"> <img src="image.png" class="img-responsive"> </a>
                </div>
                <div class="col-lg-6">
                    <a href="\"> <img src="image.png" class="img-responsive"> </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
    <div class="col-lg-4">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <a href="\"> <img src="image.png" class="img-responsive"> </a>
                </div>
                <div class="col-lg-6">
                    <a href="\"> <img src="image.png" class="img-responsive"> </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
    <div class="col-lg-4">
        <a href="\"> <img src="image.png" class="img-responsive"> </a>
    </div>
</div>

我可以对所有图像进行自动调整大小以适应屏幕并同时显示？

Answer 1

我找到了。

基本上你只需要确保每个设备大小都是一行和设置类，如：

<div class="container">
    <div class="row">
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">             
              <a href="\"> <img src="image.png" class="img-responsive"> </a>
         </div>
    </div>
    and so on...

Bootstrap容器 - 流体固定在屏幕尺寸

1 个答案: