在Bootstrap

Question

我有一个h4元素，我真的不想改变，因为我想保留h4样式（注意：我认为这个问题可以概括其他h*元素和大多数其他元素。）

这是表单上的标签，我想稍微缩进标签 如果我放弃h4并将其转换为div，那么我只需应用col-xs-offset-3即可缩进。但是如果我将同一个类作为h4应用于元素，则没有任何反应。

我尝试将h4包裹在div中并将该类应用于外部div，但这也没有做任何事情。

当然，我可以为缩进滚动自己的样式，但这似乎不像引导方式？

实现这一目标的惯用方法是什么？

这是我正在使用的HTML：

<div id="page-wrapper" data-ng-app="app" data-ng-controller="controller">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Title</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="sub-row">
            <div class="padded-row col-lg-4">
              <h4>Template</h4>                        
              <div class="col-xs-10">
                <angucomplete-alt input-class="form-control form-control-small col-xs-3"
                                  match-class="valid"
                                  other="attributes" />
              </div>
              <button class="btn btn-blue btn-slim" ng-click="reset()">Clear</button>
            </div>
          </div>
        </div>

Answer 1

唯一的惯用语＆＃39;使用offset grid columns的方式是这样的：

容器＆gt;行＆gt;柱：

所有这些类都应该应用于<div>个元素。如果要修改列，则应将该类附加到新div列，并将所有内容放在其中。这为您的标记提供了一种结构化和语义化的方法，如下所示：

＆＃13;

＆＃13;

.block { border: 1px solid grey; }

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2 block">
      <!-- Contents Go Here -->
      <h3>Offset Div</h3>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

除此之外，如果您只想缩进特定元素，请随意构建自己的类和CSS规则 - bootstrap在创建其他样式时不会帮助或伤害您。