我希望在主要部分中放置 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 替换为 col-sm-4 col-xs-12 text-center 它会把你的网格变成一个在另一个下面并且居中对齐但是 text-center 会将所有设备的内容对齐。
如果您只想让移动设备的内容居中对齐，您可以为小型设备使用 css 媒体查询 和 css 属性 text-align:center;。
调整窗口宽度时，您还可以使用 jquery 添加类 text-center
J查询代码
$(window).resize(function(){
if($(window).width() <= width_where_you_want_to_add_class){
$('selector id or class').addClass('text-center');
}
});
关于html - 将 3 个网格列放在同一行上，当它们不适合时将它们包裹在中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45888122/