Question

我正在尝试在bootstrap 3中实现带有流体容器的设计。

无论我如何尝试，在各种屏幕上测试时，盒子的位置都不同。

设计假设看起来像这样

我实施的是

<div class="container-fluid">

    <!-- Marketing Icons Section -->
    <div class="row">
        <div class="col-lg-8 c1">
             <img src="images/slider.png">
        </div>
        <div class="col-lg-4 c2">
             <div class="row">
                <div class="col-lg-12 c3">
                    <img src="images/user.png" class="img-responsive">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 c4">
                <h1>BOX1</h1>

                </div>
                <div class="col-lg-6 c5">

                <h1>BOX2</h1>
                </div>
             </div>

             <div class="row">
                <div class="col-lg-6 c6">
                <h1>BOX3</h1>
                </div>
                <div class="col-lg-6 c7">
                <h1>BOX4</h1>
                </div>
             </div>
        </div>

    </div>

    <div class="row bottom_bg">
    <div class="col-lg-3">
     4+ XXXXXXX
    </div>
    <div class="col-lg-3">
     444+ XXXXXXX
    </div>
    <div class="col-lg-3">
     6664+ XXXXXXX
    </div>
    <div class="col-lg-3">
     89894+ XXXXXXX
    </div>
    </div>

样品： http://riyalinew.jeddahloyalty.com/html/

我应该在滑块盒上使用img-responsive类吗？
我应该在左侧4个方框中添加最小高度吗？
当调整浏览器窗口大小时，左侧框将出现在右侧滑块框的顶部。
- 在大屏幕上，右侧框和左侧框显示介于两者之间的宽白色区域。

是否可以使用流体容器实现此设计？

Answer 1

尝试将col-md-x添加到div.col-lg-x类名中。 col-lg-x专为大屏幕设计，并为您的布局设置不同的比例值。

Answer 2

好的在chrome工具中编辑，我可以做到这一点。我没有使用固定的高度。这可以使用flexbox解决。如果你的盒子有内容。我可以产生相同的结果。我仍然想知道如何在保持盒子高度相同的情况下添加上部轮廓链接。

  <div class="container-fluid">

        <!-- Marketing Icons Section -->
        <div class="row" style="
    display: -webkit-flex;  
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
">


         <div class="col-lg-8 c1" style="flex: 2;">
                 <img src="images/slider.png" class="img-responsive">
            </div>
            <div class="col-lg-4 c2" style="
    padding: 0px;
    /* margin: 0px; */
    flex: 1;
    background: rgba(0, 173, 166, 0.41);">
<div class="c1 row" style="height: 50vh;">//box 1,23,4 row here

Answer 3

即使在小屏幕中也使用col-xs来使用相同的表格。

用于不同屏幕尺寸的自举液体容器盒

3 个答案: