在面板标题上添加按钮 addons/input_group

Question

关于 input-groups-buttons bootstrap 3 功能： https://getbootstrap.com/components/#input-groups-buttons

我想知道如何创建一个 CSS 来重现 panel-heading 的相同功能。

此时，我在面板标题内有一个按钮（我不得不稍微更改一下 CSS 以便它适合 panel-heading）。

http://www.bootply.com/TjI7cyaYIu（没有我的小 CSS hack）

所以我希望此按钮的显示方式与 input-group-button 相同。

此处可能已发布类似问题：Bootstrap input-group-addon icons for non-inputs，但没有任何相关答案。

我知道这不是 bootstrap 功能，我的 CSS 技能很低，所以我希望有人能帮助我！

Answer 1

试试这样的方法 :) 应该适合你。

<div class="panel panel-default">
  <div class="panel-heading">
    <div style="display: flex;">
      <div style="width: 80%;"> Title goes Here </div>
      <div style="width: 20%;" class="text-right"> ICON </div>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

http://www.bootply.com/RR1vUVQh97

如果您想轻松学习一些 CSS-基础知识以及如何使用 bootstrap，请尝试 codecademy ;)

-------------------------------------------- ---------------------- 编辑：

这是包含您的按钮的解决方案：

<div class="panel panel-default">
  <div class="panel-heading" style="display: flex;">
    <div style="width: 80%">
      <h4 class="panel-title" style="margin-top: 7px;">MY TITLE</h4>
    </div>
    <div style="width: 30%" class="text-right">
      <button class="btn btn-sm btn-danger pull-right">
        <i class="fa fa-trash"></i>
      </button> 
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, ultricies a luctus ac, congue et dui. Suspendisse a neque augue. Ut laoreet elit pretium dolor ullamcorper feugiat. Curabitur scelerisque, diam in tristique consequat, lacus quam sagittis lorem, ut gravida enim arcu ultricies mauris. Maecenas convallis pretium diam sed malesuada. Donec eget nunc id ligula elementum interdum vel vitae est. Morbi ut magna vulputate dui condimentum lobortis. Curabitur commodo eget lectus a mollis. Vestibulum eget fermentum enim, id commodo diam.
  </div>
</div>

http://www.bootply.com/RltWAo76Bq

编辑了边框半径：http://www.bootply.com/eYpYJz9BcW

在面板标题上添加按钮 addons/input_group

Add button addons/input_group on panel heading

css

panel

button

twitter-bootstrap-3