带按钮的响应式引导程序面板标题？

Question

我需要一些建议来使bootstrap面板标题响应。面板的标题右侧有几个按钮。它在大屏幕上看起来很好，但是当浏览器尺寸很小时看起来很难看。

我的完整代码jsfiddle。

.panel {
  margin: 15px;
}

.panel-title {
  padding-top: 7px;
  font-size: 20px;
}

.mr-10 {
  margin-right: 10px;
}

<div class="panel panel-success panel-br-4">
  <div class="panel-heading clearfix">
    <h4 class="panel-title pull-left">
      <i class="fa fa-file-text" aria-hidden="true"></i>&nbsp;<span>Documents</span>
    </h4>
    <a id="document-сreate-btn" class="btn btn-success pull-right">
      <i class="fa fa-plus-circle"></i>
      <span>Create new document</span>
    </a>
    <a class="btn btn-warning pull-right mr-10">
      <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
    </a>
    <a class="btn btn-warning pull-right mr-10">
      <span>Save new order</span>
    </a>
  </div>
  <div class="panel-body">Some content</div>
</div>

如果所有项目都不能放在一行中，我想制作标题，如下图所示：

这些东西是由flexbox还是bootstrap网格系统制作的？什么是更好的方式？我会感谢任何例子！ ：）

Answer 1

这只是一个如何使用Bootstrap网格系统的简单示例。它不会像你想要的那样完美，但它会给你一个网格系统的介绍。另外，不要忘记阅读媒体查询。

<div class="panel panel-success panel-br-4">
 <div class="panel-heading">
   <div class="row">
      <div class="col-sm-6">
         <h4 class="panel-title">
            <i class="fa fa-file-text" aria-hidden="true"></i>
            <span>Documents</span>
         </h4>
      </div>
      <div class="col-sm-3" style="display: flex">
         <a class="btn btn-warning mr-10">
         <span>Save new order</span>
         </a>
         <a class="btn btn-warning">
         <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
         </a>
      </div>
      <div class="col-sm-3">
         <a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
         <i class="fa fa-plus-circle"></i>
         <span>Create new document</span>
         </a>
      </div>
   </div>
</div>
<div class="panel-body">Some content</div>