我想在主部分放3列，1个列表组，1个Twitter时间线和1个Facebook时间线。
全屏显示时，我希望所有 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>
有什么建议吗？
谢谢！
只需将这些类添加到您的父div，它就会自动调整所有屏幕中央的 iframe 和列表项。
使用col-sm-4 col-xs-12文本中心重新排边 它会将您的网格变成一个在另一个下面并居中对齐，但文本中心会将内容对齐在所有设备的中心。
如果只想将内容对齐居中，则可以使用css 媒体查询和 css属性text-align：center;用于小型设备。
您还可以在调整窗口宽度时使用 jquery 添加类文本中心
Jquery Code
$(window).resize(function(){
if($(window).width() <= width_where_you_want_to_add_class){
$('selector id or class').addClass('text-center');
}
});
使用引导类完成的小提琴
您可以通过在3 个部分中添加col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4来获得所需的布局。
为了获得更好的输出，请查看此小提琴。随意调整它的大小，看看你的部分如何改变布局。 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>