Question

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

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

此时，我在面板标题内有一个按钮（我必须更改一点CSS，以便它可以放在面板标题中）。

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

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

此处可能发布了类似的问题：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-Basics以及如何使用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

使用已编辑的border-radius：http://www.bootply.com/eYpYJz9BcW

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

1 个答案: