我找不到适合我的解决方案。
我想使用Bootstrap 3进行锯齿形内容演示。
我有两个引导程序行。
第一行分为两个col-sm-6。
第一行包含：带有youtube视频的iframe和带有不同标题的文本的div。
第二个网格分为col-sm-8和col-sm-4。
第二行包含：div，不同标题的文本和图像。
问题在于内容（iframe，文本，图像）不在列中居中。
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-6">
<iframe width="100%" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<div class="col-sm-6 col-sm-offset-6 text-center">
<h2>What do you need?</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
</div>
</div>
</div>
这是fiddle
理想情况下，我正在寻找仅适用于bootstrap 3类的解决方案。我试过col-sm-offset-1，col-sm-offset-2 ...
任何帮助都非常感谢。
最佳答案
我认为您只需要将3偏移即可。 （12栏）-（6栏）= 6个剩余栏。因此，将其一分为二，每侧3列。我还加入了引导响应式嵌入，因此在不同的屏幕尺寸下显示效果都更好。
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="embed-responsive embed-responsive-16by9" style="margin: 0 auto;">
<iframe width="100%" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3 text-center">
<h2>What do you need?</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
</div>