Question

我的布局有一个左侧菜单，然后我的标题包含菜单，然后是我的主要内容区域。

发生的事情是，如果我在主要内容区域中添加另一个网格行，则会将其推到首屏下方，直到左侧菜单下方。

我的网格布局中是否犯了一个根本性错误，或者是否有一个简单的解决方法？

<div class="container-fluid">
  <div class="menu-container">
       <ul class="menu" id="sidemenu">
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
    </ul>
  </div>

  <div class="content-container">
    <div class="header">
      <div class="row">
        <div class="col-sm-6">
          left header
        </div>
        <div class="col-sm-6 text-right">
          right header
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="row">
        <div class="col-sm-12">
          this is a row #1
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          this is a row #2
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/4oak4p0o/14/

Answer 1

将overflow: auto添加到.content-container .page-content。 .row类清除浮动，以便清除浮动的左侧菜单。 https://jsfiddle.net/4oak4p0o/15/

Answer 2

这样的事情？我将

declare @sql1 as VARCHAR(4000)
SET @sql1 ='IF ''?''IN(''KY_Result_201715'',''KY_Result_201714'',''KY_Result_201713'',''KY_Result_201712''[enter image description here][2])
            EXECUTE(''USE [?]
                      SELECT  *  FROM [TB_AOIResult] where barcode ="102564AG1710200018476" '')'

EXEC sp_MSforeachdb @command1 = @sql1

添加到.content-container .page-content

在此处阅读更多内容：CSS display: inline vs inline-block

你想要什么效果，你可以取消注释css样式并添加背景颜色来检查容器/块

display: inline-block;

＆＃13;

* {
    border: 1px solid red;
}

＆＃13;

.menu-container {
  width: 120px;
  float: left;
  display: block;
  padding: 15px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.content-container {
  width: 100%;
  padding-left: 120px;
}

.content-container .header {
  padding: 15px 20px;
  height: 60px;
}

.content-container .page-content {
  padding: 50px;
 /* background: green; */
  display: inline-block;
}


/* * {
	border: 1px solid red;
} */

＆＃13;

我的布局中有一个左侧菜单，我的网格行在左侧菜单后面展开

2 个答案: