使用 Bootstrap 将侧边栏拆分为主要内容周围的顶部和底部答案

【问题标题】：Splitting sidebar into top and bottom around main content with Bootstrap使用 Bootstrap 将侧边栏拆分为主要内容周围的顶部和底部
【发布时间】：2017-02-26 22:04:24
【问题描述】：

每当屏幕尺寸接近移动设备分辨率时，我都会尝试使用 Bootstrap 将左对齐的侧边栏拆分为 2 个不同的部分。 This StackOverflow post 设置了我想要做的事情，但从下图可以看出，当我试图让侧边栏显示为一个连接部分时，我遇到了列换行问题。

下图以绿色显示侧边栏的顶部，以蓝色显示侧边栏的底部，以及以红色勾勒出的主要内容部分。我只是想在这个特定的屏幕尺寸下连接侧边栏的顶部和底部。

BootstrapSidebarSplitImg（在我的代表更高之前无法粘贴 img.. >.

这是我从前面提到的链接中直接提取的代码。代码是相同的，但由于某种原因，底部侧边栏列被包裹到前一个内容部分的文本底部。

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right;
  }
}
.lower {
  clear: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta charset="UTF-8">
  <title>test Sidebar Split</title>
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="upper col-sm-3" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="col-sm-9 col-sm-pull-right" style="border: 3px solid blue">
        <h1>Main content</h1>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
      </div>    
      <div class="lower col-sm-3" style="background:green">
        <h3>I want to fill the white space above!</h3>
      </div>
    </div>
  </div>
  
  <!-- scripts at bottom -->
  <script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

我更愿意找到一个不需要执行完全不同的操作（例如显示/隐藏部分）的解决方案。

任何想法将不胜感激！谢谢！

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

Welp，感谢 Google Chrome 的开发人员工具，我能够发现代码很好，它只是在运行时被 Bootstrap 代码重置。一旦我意识到这一点，我需要做的就是在 float right 语句中添加“！important”，它就开始工作了。

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right !important;
  }
}
.lower {
  clear: left;
}

【讨论】：