引导液体容器盒不同的屏幕尺寸

不管我如何努力，当上各种屏幕测试盒的位置是不同的。

设计是假设这个样子

什么，我已经实现了在这里

<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 - 滑块上的响应式类X ？
我应该在左边添加最小高度4个盒子吗？
当浏览器窗口调整大小时，左边框位于右侧滑块框的顶部。
- 在大屏幕上，右边的框和左边的框显示出一个宽广的白色区域。

是否有可能实现这种设计，液体容器？

来源

2016-11-14 codestings

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

来源

2016-11-14 14:04:58 vesna

效果是一样的，问题是左侧的盒子应该总是等于右侧的大横幅盒子。 – codestings

好的编辑，我最多能做到这一点。我没有使用固定的高度。这可以通过使用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

来源

2016-11-14 18:33:33 user1547535

当您调整浏览器的大小或在更大的屏幕上看到它时会发生什么。 – codestings

在较大的屏幕上它可以正常工作，但对于需要优化的较小设备。 – user1547535

即使在小屏幕中使用col-xs也可以使用相同的格式。

来源

2016-11-15 08:35:59

您如何看待右侧滑块盒？我将如何保持滑块盒和左侧盒子在同一条终点线上。（在不同的显示器屏幕上） – codestings

将图像设置为响应。添加以下css .c1 img {width = 100％;宽度：100％; 身高：自动; } –

引导液体容器盒不同的屏幕尺寸

回答

相关问题