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 EXCEPT no-wrap。我的css for no-wrap是

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

所以这是我最有希望的解决方案，但它仍然不起作用。表格位于h3下方。

我也尝试在面板标题中使用bootstrap列，但是当默认的灰色背景被遮挡时。

如何在h3旁边显示此表单 - 所有内容都在面板标题内？请注意，您可以假设有足够的屏幕宽度。 99.9％的用户将使用笔记本电脑访问此页面。该面板用于显示业务报告。移动响应不是优先事项。

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

Answer 1

使用display: flex;

Demo jsfiddle

Answer 2

你可以尝试这个。您只需要在代码中包含GRID OF BOOTSTRAP，例如col-xs-* , col-sm-* , col-md-* , col-lg-*。在您的情况下不需要自定义CSS。你也可以问我进一步的问题。

<HTML>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="panel panel-default">
    <div class="panel-heading">

      <div class="row">
        <div class="col-xs-4 col-md-6 col-lg-6">
          <h3 class="panel-title">My Title</h3>
        </div>

        <div class="col-xs-8 col-md-6 col-lg-6">
          <form>
            <div class="form-group">
              <select class="form-control" id="sel1">
                <option>1</option>
                <option>2</option>    
              </select>
            </div>
          </form>
        </div>
      </div>

    </div>
    <!-- end panel-heading -->

    <div class="panel-body">
      Body Text
    </div>

  </div>
  <!-- end panel -->
</body>
</HTML>

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

2 个答案: