將小型設備的Covert Bootstrap列分成若干行

我有一個容器，每行有4行，每列有兩列，比例爲4：8。對於每列，它適用於寬度大於1080像素的屏幕，對於小於此內容重疊的屏幕非常適用。將小型設備的Covert Bootstrap列分成若干行

我想要做的是讓所有的列都變成全屏寬度的行。

如果有人有任何建議，以獲得更好的結果請幫助我。我發現許多人有同樣的問題，並試圖解決他們的問題，但沒有爲我工作。

.proctitleleft { 
 
    font-size: 20px; 
 
    position: absolute; 
 
    left: 90px; 
 
    top: 20px; 
 
    bottom: 20px; 
 
} 
 

 
.procimageleft { 
 
    position: relative; 
 
    margin-bottom: 40px; 
 
    margin-right: 90px; 
 
    margin-top: 20px; 
 
} 
 

 
.procimageright { 
 
    position: relative; 
 
    margin-bottom: 40px; 
 
    margin-left: 90px; 
 
} 
 

 
.procparagleft1 { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 138px; 
 
    font-size: 14px; 
 
} 
 

 
.procparagleft2 { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 138px; 
 
    font-size: 14px; 
 
} 
 

 
.procparagleft3 { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 138px; 
 
    font-size: 14px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="processcontainer"> 
 
    <div class="arw_tab_title"> 
 
    <div class="tab_title"> 
 
     <h2 class="title">The Process</h2> 
 
     <p class=""></p> 
 
    </div> 
 
    <div class="tab_sub_title"> 
 
     <h2 class="title">our perfect process</h2> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-8"> 
 
     <div class="proctitleleft"> 
 
     <h3>1-Far far away</h3> 
 
     </div> 
 
     <div class="procparagleft1"> 
 
     <p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town 
 
      <br>To Bangladesh we went to see if that was true.And it was!<br> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="procimageleft"> 
 
     <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png"> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="procimageright"> 
 
      <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
     <div class="proctitleleft"> 
 
      <h3>2-Lavish Studio left their mark </h3> 
 
     </div> 
 
     <div class="procparagleft2"> 
 
      <p>Oh buddy! What can I say? 
 
      <br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-8"> 
 
     <div class="proctitleleft"> 
 
      <h3>3-Complete the artwork</h3> 
 
     </div> 
 
     <div class="procparagleft3"> 
 
      <p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="procimageleft"> 
 
      <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="procimageright"> 
 
      <img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png"> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
     <div class="proctitleleft"> 
 
      <h3>4- Quality meets perfection 
 
      </h3> 
 
     </div> 
 
     <div class="procparagleft2"> 
 
      <p>We stand by our products because we’re confident in what we deliver. 
 
      <br> That’s why we designed an unsurpassed shopping and unboxing experience to befit such creations 
 
      <br> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2017-05-02 Ahmed Elshaer

使用col-md-4和col-md-8代替col-xs-*所以你有4：8比寬度和全COL-寬度以上992px 992px下。你不必自己做。這是bootstrap的標準行爲。

看到https://getbootstrap.com/css/#grid-media-queries進一步的細節

來源

2017-05-02 21:11:57

我試了一下，它的工作，但thecol-MD-8隱藏在col-md-4的後面，所以圖像是唯一可見的東西，我從網站 https：//cdn.shopify截取了這個截圖。 com/s/files/1/1965/8259/t/4/assets/Screen_Shot_2017-05-03_at_12.29.04_AM.png？8028167174678423193 –

看起來像位置和浮動等其他樣式會破壞默認行爲。 –

我刪除了css代碼和id完美謝謝:) :) –

使用三類COL-MD-4，COL-SM-4和col-XS-12，最後一個爲最小的設備全寬div標籤。

來源

2017-05-02 21:21:00 Super

有幫助，我用過最後一個 –

將小型設備的Covert Bootstrap列分成若干行

回答

相關問題