css - 使用 Bootstrap 面板 - 如何将表格放在标题旁边？

Question

我已经尝试了至少三个通过搜索此站点提出的解决方案，但没有任何效果。我接近了，但在面板默认背景颜色上被骗了。出于某种原因，背景没有在我的元素后面显示出它的完整高度。我想在标题旁边放一个表格。这是我尝试过的。

<div class="panel panel-default">
    <div class="panel-heading">

      <div class="no-wrap">
        <h3 class="panel-title">My Title</h3>
      </div>

      <div class="no-wrap">
          <form>
            <div class="form-group">  
              <select class="form-control" id="sel1">
              <option>1</option>
              <option>2</option>    
              </select>
            </div>
          </form>   
      </div> 

</div> <!-- end panel-heading -->

<div class="panel-body">
    Body Text    
</div>

</div> <!-- end panel -->  

你看到的所有类都是 Bootstrap ，除了无包装。我的 no-wrap CSS 是

.no-wrap {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
 } 

所以这是我最有希望的解决方案，但它仍然行不通。表单位于 h3 下方。

我还尝试在面板标题内使用 Bootstrap 列，但那时默认的灰色背景被遮盖了。

我怎样才能在 h3 旁边找到这个表格 - 都在面板标题内？请注意，您可以假设有足够的屏幕宽度。 99.9% 的用户将使用笔记本电脑访问此页面。该面板用于显示业务报告。移动响应不是优先事项。

下面是我不想要的截图。我想要标题旁边的输入表单。

Answer 1

使用display: flex;

Demo jsfiddle