Add button addons/input_group on panel heading

问题

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 !

回答1:

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

来源：https://stackoverflow.com/questions/40974864/add-button-addons-input-group-on-panel-heading

标签

css

button

twitter-bootstrap-3

panel