在不使用 Javascript 的情况下将标题移至 div 以上

Question

我正在尝试制作一个 element-builder (CMS)，您可以使用它来将元素拖放到页面中并轻松创建网站。我正在使用 bootstrap 模板 (css,js) 来获得响应式网站。

问题如下：

_col-md-4_______________________
|                               |
| Page Title                    |
|_______________________________|
|           |                   |
|Image      | (main content)    |
|           |                   |
|           |                   |
|div=col-xs-2___div=col-xs-10___|

我的标题必须在主要内容上方对齐。

我尝试使用 Javascript:

创建响应结果

<script>$(document).ready(function() {
    var witdh = $(\'.calculate-witdh\').innerWidth();
    $(".title-offset").each(function(){$(this).css(\'margin-left\', witdh)});
    });
    $(window).resize(function() {
    var witdh = $(\'.calculate-witdh\').innerWidth();
    $(".title-offset").each(function(){$(this).css(\'margin-left\', witdh)});
    });
    </script>

但我认为必须有更好的解决方案？主要是因为我不希望每个元素都加载到它自己的脚本中。

示例在这里：http://jsfiddle.net/abayob/vuskazh1/

有什么想法吗？

Answer 1

这是你想要的吗？

<h1 class="title-offset col-xs-offset-2">Create a title here</h1>

http://jsfiddle.net/abalter/mhqxtppn/

在不使用 Javascript 的情况下将标题移至 div 以上

Move title above div without using Javascript

html

javascript

css

alignment

twitter-bootstrap