在同一行上安装3个网格列，并在它们不适合时将它们包裹起来

时间：2017-08-25 19:16:09

标签： html css twitter-bootstrap

我希望在主要部分，1个列表组，1个Twitter时间线和1个Facebook时间线中放置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>

有什么建议吗？

谢谢！

2 个答案:

答案 0 :(得分：1)

只需将这些类添加到您的父div，它就会自动调整所有屏幕中心的iframe和列表项。

使用 col-sm-4 col-xs-12文本中心取消 col ，它会将您的网格变为一个低于另一个并且居中对齐但 text-center 会将内容对齐到所有设备的中心。

如果您想仅针对移动设备调整中心内容，则可以使用 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

答案 1 :(得分：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>

相关问题
最新问题