Question

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

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

BootstrapSidebarSplitImg（在我的代表更高之前无法粘贴img ..＆gt;。＆lt;）

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

@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>

我更愿意找到一个解决方案，不需要做一些完全不同的事情，如显示/隐藏部分。

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

Answer 1

Welp，感谢Google Chrome的开发者工具，我能够发现代码很好，它只是在运行时通过Bootstrap代码重置。一旦我意识到这一点，我需要做的就是在浮动权利声明中添加“！important”并开始工作。

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

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

1 个答案: