Question

我试图将一些文本放在面板的标题中，同时在同一行上放置一个左对齐的按钮。我目前正在采用的方法对于小宽度来说是有效的，但是一旦窗口到达.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。

Answer 1

stdout ，你好。如果您愿意，您实际上可以在中心使用标题我的意思是实际上以全宽为中心。你的例子被1 col抵消我这样做没有额外的col偏移，按钮仍然在左边。

在我的 Fiddle 中查看此示例，了解标题文字实际上是如何居中于整个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>

Answer 2

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

<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>

Answer 3

我想你想要的是标题是xs尺寸的全宽，只占用sm及更高版本的部分屏幕。为此，请删除空列，然后应用偏移量。另外，请注意有12列偏移3（即左边3列，右边3列）意味着中间列只能是6宽。我将这一个设置为偏移2作为示例。我还修复了内部列，最多可添加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>

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

3 个答案: