1. 首頁
  2. 問答
  3. 在同一行上安裝3個網格列，並在他們不適合時包裹它們的中心

在同一行上安裝3個網格列，並在他們不適合時包裹它們的中心

2017-08-25 36 views
0

我期待在主要部分，1個列表組，1個列表組，1個列表時間列和1個Facebook時間列中放入3列。在同一行上安裝3個網格列，並在他們不適合時包裹它們的中心

在全屏幕時，我希望所有3個在同一行，當他們不能在同一行上適合所有人時，我希望他們所有一個都在頁面中間的另一個下面（居中）（移動場景）。

在我的情況下，它們開始重疊，最後，當頁面縮小時，它們會一個在另一個的下方，但它們停留在左側，並在右側留下一些清晰的空間。

這是我的代碼：

現場演示：https://jsbin.com/qayitequga/1/edit?html,css,output

代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>JS Bin</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<style type="text/css"> 
     .list-group{ 
      width: 350px; 
      height: 800px; 
      overflow-y:scroll;} 
</style> 
</head> 
<body> 

<main> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <main> 
     <div class="container" style="width:100%; padding-left: 4.5%; padding-right: 4.5%"> 
      <div class="row"> 
      <div class="col s12 m4"> 
       <div class="list-group"> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
       </a> 
       <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><small class="text-muted">Date</small></div><p class="mb-1" align="justify" style="font-size: 15px">Test</p> 
       </a> 
      </div> 
      </div> 
      <div class="col s12 m4"> 
      <a class="twitter-timeline" data-width="350" data-height="800" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
      </div> 
      <div class="col s12 m4"> 
      <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div> 
      </div> 
     </div> 
     </main> 
</body> 
</html>

有什麼建議？

謝謝！

來源

2017-08-25 AMayer

+0

查看更新[小提琴]（https://jsfiddle.net/mkn5vojt/3/） –

+0

嗨@MaulikBhatt，我只是測試它。當我縮小寬度時，他們不會去另一個的波紋管。 – AMayer

+0

您是否使用過媒體查詢....？ –

回答

1

只需將這些類添加到您的父div，它會自動調整所有屏幕中心的iframe和列表項。

Relace 山坳與COL-SM-4 COL-XS-12文本的中心它會變成你的網格成一個在另一個之下和中心對齊，但文本中心將調整的內容所有設備的中心。

如果你想對齊中心的內容只是爲了移動，你可以使用css媒體查詢和CSS屬性text-align：center;適用於小型設備。

您還可以使用jQuery調整窗口

的寬度時添加類 文本中心

jQuery代碼

$(window).resize(function(){ 
    if($(window).width() <= width_where_you_want_to_add_class){ 
     $('selector id or class').addClass('text-center'); 
    }  
});

fiddle done with bootstrap classes

來源

2017-08-25 19:35:09

0

你可以有你加入的願望佈局col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4到你的3個部分。

爲了更好的輸出看看這個小提琴。隨意調整它，看看你的部分如何改變佈局。 https://jsfiddle.net/qsy0nong/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<body> 
 

 
    
 
     <main> 
 
      <div class="container"> 
 
       <div class="row"> 
 
       <div class="col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4"> 
 
        <div class="list-group"> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div> 
 
        </a> 
 
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><small class="text-muted">Date</small></div><p class="mb-1" align="justify" style="font-size: 15px">Test</p> 
 
        </a> 
 
       </div> 
 
       </div> 
 
       <div class="col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4"> 
 
       <a class="twitter-timeline" data-width="350" data-height="800" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
       </div> 
 
       <div class="col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4"> 
 
       <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div> 
 
       </div> 
 
      </div> 
 
      </main> 
 
</body>

來源

2017-08-25 20:37:29

相關問題

 相關問題