添加按鈕插件/ input_group面板標題

Question

關於輸入組，按鈕上引導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-基礎知識以及如何使用引導，儘量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