在面板标题上添加按钮插件/input_group [英] Add button addons/input_group on panel heading

问题描述

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

我想知道如何创建与面板标题具有相同功能的CSS.

这时，我在面板标题中有一个按钮(我不得不更改一点CSS，以便它可以适合面板标题).

http://www.bootply.com/TjI7cyaYIu (没有我的小CSS hack)

所以我希望此按钮以与输入组按钮相同的方式显示.

类似的问题可能已经发布在这里: Bootstrap输入组-用于非输入的附加图标，但没有任何相关答案.

我知道这不是引导功能，并且我的CSS技能很低，所以我希望有人可以帮助我！

解决方案

尝试类似的方法:)应该适用于您.

<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

Regarding the input-groups-buttons bootstrap 3 feature : https://getbootstrap.com/components/#input-groups-buttons

I would like to know how can I create a CSS that reproduced the same feature for panel-heading.

At this time, I have a button inside the panel heading (which I had to change a little CSS so it can fit in the panel-heading).

http://www.bootply.com/TjI7cyaYIu (without my little CSS hack)

So I want this button to be displayed the same way an input-group-button is.

A similar question may have been posted here : Bootstrap input-group-addon icons for non-inputs but without any relevant answers.

I know this is not a bootstrap feature and my CSS skills are pretty low so I hope someone can help me !

解决方案

Try something like this :) should work for u.

<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

If you want to learn easily some CSS-Basics and how to use bootstrap, try codecademy ;)

------------------------------------------------------------------ EDIT:

Here is the solution including your button:

<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

With edited border-radius: http://www.bootply.com/eYpYJz9BcW

这篇关于在面板标题上添加按钮插件/input_group的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！