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

Question

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

我想知道如何创建一个 CSS 来重现面板标题的相同功能。

此时，我在面板标题内有一个按钮（我必须更改一些 CSS 以使其适合面板标题）。

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

所以我希望这个按钮以与输入组按钮相同的方式显示。

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

我知道这不是一个引导功能，而且我的 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 基础知识以及如何使用引导程序，请尝试 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