如何央行响应嵌入式Bootstrap 3

技术标签: HTML.  CSS.  Twitter-Bootstrap.  视频  Twitter-Bootstrap-3

我正在尝试使用Bootstrap 3开发的布局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.

我实际上尝试了这里的所有选项,其中没有任何工作:

如何在Twitter Bootstrap 3中将YouTube视频(iframe)中控?

看答案

你应该使用 center-block 课堂不是 text-center 使用bootstrap居中div。文本中心将居中文本,您想要容器。

您还希望使用课程将其应用于您的DIV embed-responsive 所以它在行内心。

信息: 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 元素大小。这允许浏览器计算孩子的大小 div 在里面 row 类并允许引导内置 .center-block 上班班


智能推荐

嵌入式入门学习笔记3:[转]编译linux

嵌入式入门学习笔记3:[转]编译linux 摘自:https://blog.csdn.net/baidu_24256693/article/details/80115354 编译Linux是什么意思? Linux内核是Linux操作系统的核心,也是整个Linux功能体现的核心,就如同发动机在汽车中的重要性。内核主要功能包括进程管理、内存管理、文件管理、设备管理、网络管理等。Linux内核是单内核设...

3、引导加载程序--嵌入式启动

引导加载程序--嵌入式启动 在嵌入式系统中,通常并没有像BIOS那样的固件程序(有的嵌入式CPU也会内嵌一段短小的启动程序),因此整个系统的加载启动任务完全由引导加载程序BootLoader来完成。 【BootLoader】 (1)BootLoader就是在操作系统内核运行的一段小程序; (2)BootLoader的作用: ①初始化硬件设备; ②建立内存空间的映射图; ③将系统的软硬件环境带到一个...

嵌入式系统(三):ARM 指令汇编(3)

在(2)中基本上把ARM的存储访问指令过了一遍,今天搞搞其他类型的指令。 文章结构 (2)数据处理指令 ① 数据传送指令-MOV,MVN ② 算术逻辑运算指令; ③ 比较指令-不用加S标志位都会影响标志位,别的都不行 ④ 乘法指令 (3)ARM分支指令 ① 分支指令“B” ② 分支指令“BL” ③ 分支指令“BX” (4)协处...

嵌入式sqlite3简单应用

1.基本命令   sqlite3有两种命令: 1、系统命令(以.开头,不需要以;结尾),分别是:.help或者.h(查看帮助内容)   .quit或者.q(退出)、.exit(退出)、.schema或者.s(查看表结构)、.table(查看数据库下所有的表)、.databases(查看打开的数据库) 2、sql命令(不用以.开头,需要以;结尾),分别是: 《创建数据库...

嵌入式百宝箱:第3期

嵌入式百宝箱是咱公众号推文汇总的一种形式。主要是汇总本周发布过的推文,并做一些概述及推荐语。这样可以让一些错过推文的朋友可以根据自己的需要选择性的去读一些文章。 同时,也可能会分享一些杂谈。 这个百宝箱的内容会不断增多,可以配合公号的搜索功能来使用: 本周推文汇总 【重要说明】这里的推荐等级不评价文章的质量,主要是以文章的受益读者的多少做衡量。比如我们主要是分享嵌入式相关的内容,假如分享了与嵌入式...

猜你喜欢

D3 - 嵌入式C的高级用法

GCC编译流程 GCC支持的后缀 分析器 将源代码转换为汇编语言 汇编器 将汇编语言转换为CPU可执行的字节码 链接器 将汇编器生成的单独的目标文件组合成可执行的应用程序 GCC命令参数 1:-c,只编译,不链接为可执行文件,最后生成.o文件 2:-g 用于源代码调试代码 3:-O,优化编译;产生的可执行文件的执行效率提高,但是编译、连接的速度就相应地要慢一些。 4:-O2,比-O更好的优化效果,...

S3C2451嵌入式简介

嵌入式系统简介 IEEE定义:   嵌入式系统是“用于控制、监视或者辅助操作机器和设备的装置”(原文为devices used to control, monitor, orassist the operation of equipment, machinery or plants)。   可以看出此定义是从应用上考虑的,嵌入式系统是软件和硬件的综合体,还可以涵盖机电等附属...

场效应管放大电路

金属-氧化物-半导体(MOS)场效应管 N沟道增强型MOSFET 栅源加电压,在电场作用下产生沟道。产生沟道的门限开启电压VT。 漏源加电压,产生电压梯度,导致沟道夹断。预夹断的临界条件 输出特性 特性方程 可变电阻区                         &...

【响应式】foundation栅格布局的“尝鲜”与“填坑”

  提到响应式,就不得不提两个响应式框架——bootstrap和foundation。在标题上我已经说明白啦,今天给大家介绍的是foundation框架。 何为“尝鲜”?就是带大伙初步一下foundation的灵活和强大 何为“踩坑”?就是我把我使用的时候踩过的坑给标个记号,这样大伙用的时候就可以“绕道而...

word2vec笔记

word2vec 词向量 one hot Distributed representation CBOW&Skip-Gram CBOW Skip-Gram sigmoid函数 Huffman树 基于Hierarchical Softmax的模型 基于Negative Sampling的模型 本文基于word2vec原理CBOW与Skip-Gram模型基础 CBOW与Skip-Gram的模型...

问答精选

SQL, update command not ending properly

It keeps saying : ORA-00933: SQL command not properly ended Pls help me or give me a link to a solution You can use a correlated subquery instead:...

How can I escape $.each loop with my data?

I'm doing an Json call to retrieve an a list of locations with information details for each location. longitude and latitude are included in this info. I am using Google's distance matrix api to get t...

How to display all the columns (and their type) in all tables of all schemas in a database?

Suppose you have a database which has an 'n' number of schemas with an 'n' number of tables each. Each of these contain an 'n' number of columns. How would I print all this data along with the data ty...

How to set the java.library.path in intelliJ Idea

Could anyone please help how do I solve this error: I am using IDEA IDE as a first time, and have been using Resin_4.0.37 as a server to test my work. As soon as I start my lcoal server in debug mode ...

How to calculate mouse coordinate based on resolution c#

i am trying to develop a remote desktop apps with c#. so i have couple of question regarding mouse coordinate calculation based on picture box suppose i have picture box and i want to capture mouse co...

相关问题

相关文章

热门文章

推荐文章

相关标签

推荐问答