带有按钮的响应式引导面板标题？答案

【问题标题】：Responsive bootstrap panel header with buttons?带有按钮的响应式引导面板标题？
【发布时间】：2018-07-09 17:11:15
【问题描述】：

我需要一些建议来使引导面板标题响应。面板有标题，右侧有几个按钮。在大屏幕上看起来不错，但在浏览器尺寸较小时看起来很难看。

我的完整代码在这里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 网格系统制作的？有什么更好的方法？我将不胜感激任何例子！ :)

【问题讨论】：

Bootstrap 的网格系统将是一个不错的方法。试一试，如果您有问题，请告诉我们。
你好@sean :) 引导网格系统的问题是即使项目适合一行也基于浏览器屏幕的顺序。我认为更好的方法是 flexbox，当项目不能放在一行中时我有样式，但我不知道如何触发它。顺便说一下，在帖子中您可以看到该 css 代码。
您可以使用 Bootstrap 网格系统（行和列），这将是实现目标的最简单方法。如果您想更准确地显示元素，则需要使用媒体查询。你不一定需要使用弹性盒子（虽然我真的很喜欢）。 Bootstrap 网格系统不过是“开箱即用”的媒体查询。
@LuizChagasJr 你好！我正在尝试使用网格系统，但结果并不好。如果可能的话，你能给我看看你的例子吗？！
这就是我对网格系统的尝试。但是我有一些标题问题，当没有空格时，下一行的按钮也没有：jsfiddle.net/NogerbekNurzhan/8x6yg554/5

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案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>

【讨论】：

您好！ :) 不是很优雅的解决方案。它需要多次更改，但无论如何谢谢！