引導液體容器盒不同的屏幕尺寸

不管我如何努力，當上各種屏幕測試盒的位置是不同的。

設計是假設這個樣子

什麼，我已經實現了在這裏

<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％; 身高：自動; } –

引導液體容器盒不同的屏幕尺寸

回答

相關問題