Question

我正在使用引导来绘制我的页面。我想把'标题'放在线上。但是col-md-offset-4不起作用。

<div class="container">
<div class="jumbotron">
<div class="row">
  <div class="col-md-12">
    <h1 class="text-center">Beyond forever</h1>
    <h2 class="text-center"><em>My favorite band</em></h2>
    <div class="thumbnail text-center"><img src="http://res.cloudinary.com/deqlvmd9w/image/upload/v1494666517/beyond_ihkzoj.jpg"/>
    </div>
  </div>
  <div class="col-md-8 col-md-offset-4">
    <h3>Title</h3>
  </div>
</div>

这是链接https://jsfiddle.net/heshijinghuang/opsv0e09/

Answer 1

它的工作原理:)尝试调整JSFiddle结果选项卡的大小。它的大小只是小到md大小。如果您想在小屏幕上获得相同的结果，请使用sm或xs类，例如col-sm-8 col-sm-offset-4或col-xs-8 col-xs-offset-4。

Answer 2

col-md-offset-4“在你的jsfiddle中不起作用”，因为jsfiddle视图区域非常小，这使-md-不再起作用。

要使它在jsfiddle中运行，您需要将其更改为col-sm-offset-4，并稍微扩展视图区域。

顺便说一句，如果标题需要通过col-*-offset-*居中，我认为最好在您的情况下使用col-sm-offset-2。

我做了一个新的jsfiddle。请检查（需要调整结果面板的大小并增加其宽度）。

Answer 3

你是造型中等大小的屏幕md，而JSfiddle html渲染器的尺寸很小sm

将您的col-md-8 col-md-offset-4更改为col-sm-8 col-sm-offset-4，它会正常工作

Answer 4

感谢您的回复。这个问题已经解决了。这是因为boostrap 4使用不同的偏移样式（offset-sm-2）在bootstrap 3中，它是col-offset-sm-2。

Bootstrap col偏移不起作用

4 个答案: