文章/答案/技术大牛

发布

社区首页 >问答首页 >如何居中响应嵌入式bootstrap 3

问如何居中响应嵌入式bootstrap 3
EN

Stack Overflow用户

提问于 2016-11-28 01:59:35

回答 2查看 2.5K关注 0票数 0

我正试着将我用bootstrap 3开发的布局居中，无论我在之前的线程中尝试什么，它似乎都不居中。

我现在的代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 text-center"> <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM‌8wBObKeWWFuh5zqac5d8‌XMZcfe"></iframe> </div>

我需要更改CSS吗？我是不是漏掉了什么？

这就是我遇到问题的地方。startupmarketing.tammycamp.com

实际上，我尝试了这里的所有选项，但都不起作用：

How do i center Youtube Video (iframe) in twitter bootstrap 3?

html

css

twitter-bootstrap

video

twitter-bootstrap-3

回答 2

Stack Overflow用户

发布于 2016-11-28 02:08:30

您应该使用center-block类而不是text-center来使用bootstrap将div居中。文本中心会将文本居中，你想要的容器。

您还希望将其应用于具有embed-responsive类的div，以便它位于行的中心。

信息：http://getbootstrap.com/css/#helper-classes-center

编辑:看看你的代码现在是如何设置的。删除当前拥有的内容，并将其替换为以下内容：

<div class="row">
    <div class="embed-responsive embed-responsive-16by9 center-block" style="max-width: 853px;">
    <iframe class="embed-responsive-item" style="max-width:853px; max-height:480px;" src="https://www.youtube.com/embed/videoseries?list=PLOStnEM8wBObKeWWFuh5zqac5d8XMZcfe"></iframe>
    </div>
</div>

如您所见，我们正在将嵌入的div包装在一个.row类中，并且添加了一个内联样式的max-width:853px以匹配您的iframe元素的大小。这允许浏览器计算row类中的子div的大小，并允许引导内置的.center-block类工作

票数 2

Stack Overflow用户

发布于 2016-12-03 00:45:57

我在看你的源代码。尝试在div周围添加一个容器，并使用center-block将其居中。为了让bootstrap正常工作，如果使用网格系统，则需要.container或.container-fluid类。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40832086

复制

相似问题

问如何居中响应嵌入式bootstrap 3
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何居中响应嵌入式bootstrap 3EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何居中响应嵌入式bootstrap 3
EN