首页 文章

将组件定位在引导程序面板 Headers 内

提问于
浏览 次
11

使用bootstrap，如何在面板 Headers 内水平对齐组件？为了得到：title：对齐到左边，btn1：居中，btn2：向右对齐 .

<div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">title</h3>

            <button class="btn">btn1</button>

            <button class="btn">btn2</button>
        </div>

        <div class="panel-body">
            text
        </div>
    </div>
</div>

我试图创建一个引导类"row"和列，但该行超出了panel-heading，因为该面板位于另一个col-md-6中：
result of using columns

html css twitter-bootstrap

2 回答

  • 27

    使用.row和.col的正确方法就是这样

    <div class="panel panel-default container-fluid">
    <div class="panel-heading row">
        <div class="col-xs-4"><h3 class="panel-title">title</h3></div>
        <div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
        <div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
    </div>
    <div class="panel-body">
        text
    </div>
</div>

    http://jsfiddle.net/j7u53eav/3

    回复于
  • 3

    使用Ch.Idea的答案作为起点，您可以在 panel-heading 中添加行类 . 但是，您不需要将面板设为 container-fluid .

    由于Bootstrap row 类添加了负边距，您只需要删除它们 . 假设每次将 row 添加到 panel-heading 时，您会想要这种行为，就像添加一些CSS一样简单：

    .panel-heading.row {
  margin: 0
}

    由于列已经有填充，您可以通过从行中删除左右来进一步：

    .panel-heading.row {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

    为了彻底，修改了Ch.Idea作品的副本：

    <div class="panel panel-default">
    <div class="panel-heading row">
        <div class="col-xs-4"><h3 class="panel-title">title</h3></div>
        <div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
        <div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
    </div>
    <div class="panel-body">
        text
    </div>
    <table class="table">
      <!-- insert rest of table here -->
    </table>
</div>

    一个修改过的jsfiddle显示全宽度表：

    http://jsfiddle.net/my7axd1b/3/

    回复于

相关问题