首页 文章

使用Twitter Bootstrap在面板 Headers 中居中文本和左对齐按钮

提问于
浏览 次
1

我试图将一些文本放在面板的 Headers 中，同时在同一行上放置一个左对齐的按钮 . 我正在采用的方法适用于小宽度，但是一旦窗口到达.col-sm区域（> 750px），文本就不再居中，而是似乎对齐 . 另外，我不确定这种尝试重叠col-xs-1和col-md-12的方法是否真正使文本居中，即使对于小窗口宽度也是如此 .

<div class="container">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-8">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="container" style="padding:0;">
                        <div class="row">
                            <div class="col-xs-1">
                                <button type="button" class="btn btn-default btn-sm">Button</button>
                            </div>
                            <div class="col-md-12" style="text-align:center">Heading</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是JSFiddle .

css twitter-bootstrap

3 回答

  • 0

    stdout ，你好 . 如果你愿意，你可以在中心实际拥有 Heading .
    我的意思是实际上以全宽为中心 . 您的示例偏移1 col .
    我这样做没有额外的col偏移，按钮仍然在左边 .

    看看我的 Fiddle 中的这个例子，看看Header文本实际上是如何在整个div中居中的 .
    它有很多让cols / row等 .

    我离开了上面的其他一个例子，你可以看到差异 .

    这是用于此示例的CSS .

    <style>
.align-left{
   float:left !important; 
}
.center-text-vert{
   line-height:30px;  /*height of the button*/
}
.center {
   text-align: center; 
   margin-right: 55px; /*width from the left to the far right of the button */   
}  
</style>

    enter image description here

    <div class="container">
  <div class="row ">
    <div class="col-sm-8 col-sm-offset-2 ">
      <div class="panel panel-primary ">
        <div class="panel-heading">
            <div class="center-text-vert">
                <button type="button" class="btn btn-default btn-sm align-left">Button</button>
                <div class="center">  
                    Heading
                </div>   
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
    回复于
  • 3

    尝试删除面板内的容器，并使用左侧的按钮类和 Headers 的文本中心类，看看它是否适合您 .

    <div class="container">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-8">
            <div class="panel panel-primary">
                <div class="panel-heading">

                        <div class="row">
                            <div class="col-xs-1">
                                <button type="button" class="btn btn-default btn-sm pull-left">Button</button>
                            </div>
                            <div class="col-xs-11 text-center">Heading</div>
                        </div>

                </div>
            </div>
    回复于
  • 0

    我想你想要的是 Headers 是 xs 大小的全宽，只占用 sm 和更高的屏幕的一部分 . 为此，请删除空列，然后应用偏移量 . 另外，请注意有12列偏移3（即左边3列，右边3列）意味着中间列只能是6宽 . 我've set this one to be offset by 2 as an example. I' ve还修复了内部列，最多可添加12个（尽管你不应该嵌套 container 类：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-sm-8">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-1">
              <button type="button" class="btn btn-default btn-sm">Button</button>
            </div>
            <div class="col-md-11" style="text-align:center">Heading</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    回复于

相关问题