Bootstrap 4-Col 2行div響應

如何在引導程序響應在移動設備上製作4 x 2 Column Div？優選地，使得它們在特定的斷點處都在彼此之下崩潰。Bootstrap 4-Col 2行div響應

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="services-col-1"> 
    <div class="col-xs-3" id="p1"><strong>Heading One</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    <div class="col-xs-3 col-half-offset" id="p2"><strong>Heading Two</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    <div class="col-xs-3 col-half-offset" id="p3"><strong>Heading Three</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    <div class="col-xs-3 col-half-offset" id="p4"><strong>Heading Four</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    <div class="col-xs-3 col-half-offset" id="p5"><strong>Heading Five</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>  
    <div class="col-xs-3 col-half-offset" id="p6"><strong>Heading Six</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    </div>

來源

2016-11-06 7O07Y7

你可以製作狙擊手，並製作更多的指定。 –

你能清楚地闡述你的問題嗎？ –

我的錯誤是指4列2行。它在桌面上應該顯示，但是當寬度減小時它們會變窄。我需要它們以較小的屏幕尺寸在另一個之下摺疊。 – 7O07Y7

如果我理解正確，你需要兩行4列，如果是的話。正如你所提到的，Bootstrap有一個解決方案。

在一行中必須有最多12列。 12 total/4 columns = 3 (col-*-3)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
     <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
     <div class="col-xs-3 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-11-06 18:44:09 Mardzis

有沒有辦法使屏幕尺寸縮小到移動後，每個div摺疊在一起？因爲我將在每個div中至少有一段文字。 – 7O07Y7

一種可能的方式做到這一點是使用.col-xs-12類靶向移動設備。

結帳這個Codepen

還是看看下面的代碼片段：

<!-- Latest compiled and minified CSS --> 
 
<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="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
     <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
     <div class="col-xs-12 col-sm-3"> 
 
     One of four columns 
 
    </div> 
 
    </div> 
 
</div>

希望這有助於！

來源

2016-11-07 15:45:54

Bootstrap 4-Col 2行div響應

回答

相關問題