使用Bootstrap将侧边栏拆分为主要内容的顶部和底部 [英] Splitting sidebar into top and bottom around main content with Bootstrap
问题描述
每当屏幕尺寸接近移动设备分辨率时，我都会尝试使用Bootstrap将左对齐的侧边栏拆分为2个不同的部分。 此StackOverflow帖子设置我想要做的事情，但是从下图中可以看出，当我试图让侧边栏显示为一个连接部分时，我会遇到列包装问题。
I am trying to use Bootstrap to split a left aligned sidebar into 2 different parts whenever the screen size gets to be near mobile device resolution. This StackOverflow post sets up what I am trying to do, but as can be seen from the image below, I encounter column wrapping issues when trying to get the sidebar to display as one connected section.
下图显示侧栏顶部为绿色，侧边栏底部为蓝色，主要内容部分为红色。我只是想在这个特定的屏幕尺寸上连接侧边栏的顶部和底部。
The image below shows the top of the sidebar in green, bottom of the sidebar in blue, and the main content section outlined in red. I am just trying to connect the top and bottom of the sidebars at this particular screen size.
BootstrapSidebarSplitImg （可以在我的代表更高之前粘贴img ..>。<）
BootstrapSidebarSplitImg (Can't paste img until my rep is higher.. >.< )
这是我直接从我之前提到的链接中提取的代码。代码是相同的，但由于某种原因，底部边栏列被包装到前一个内容部分的文本底部。
Here is the code I have pulled directly from the link I referred to earlier. The code is the same, but for some reason the bottom sidebar column is getting wrapped to the bottom of the text for the previous content section.
@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>
我更愿意找到一个解决方案，不需要做一些完全不同的事情，如显示/隐藏部分。
I would prefer to find a solution that doesn't require having to do something completely different like show/hiding sections.
任何想法都将不胜感激！谢谢！
Any ideas would be greatly appreciated! Thanks!
推荐答案
Welp，感谢谷歌Chrome的开发者工具，我能够发现代码很好，它只是在运行期间通过Bootstrap代码重置。一旦我意识到这一点，我需要做的就是在浮动权利声明中添加！important并开始工作。
Welp, thanks to Google Chrome's developer tools I was able to find out that the code was fine, it was just getting reset during runtime by the Bootstrap code. Once I realized that, all I needed to do was add "!important" to the float right statement and it started working.
@media (min-width: 768px) {
.col-sm-pull-right {
float: right !important;
}
}
.lower {
clear: left;
}
这篇关于使用Bootstrap将侧边栏拆分为主要内容的顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![BootstrapSidebarSplitImg](\"https://i.stack.imgur.com/HsR5f.png\"){kind=link}