每当屏幕尺寸接近移动设备分辨率时，我尝试使用 Bootstrap 将左对齐侧边栏分成两个不同的部分。这篇 StackOverflow 帖子设置我想要做的事情，但从下图可以看出，当我尝试让侧边栏显示为一个连接部分时，我遇到了列换行问题。
下图显示侧边栏的顶部为绿色，侧边栏的底部为蓝色，主要内容部分为红色。我只是想在这个特定的屏幕尺寸下连接侧边栏的顶部和底部。
BootstrapSidebarSplitImg（在我的代表更高之前无法粘贴图像..>.
这是我直接从之前提到的链接中提取的代码。代码是相同的，但由于某种原因，底部侧边栏列被包裹到前一个内容部分的文本底部。
@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>
我更愿意找到一种不需要执行完全不同的操作（例如显示/隐藏部分）的解决方案。
任何想法将不胜感激！谢谢！
Welp，感谢 Google Chrome 的开发人员工具，我发现代码很好，它只是在运行时由 Bootstrap 代码重置。一旦我意识到这一点，我所需要做的就是在 float right 语句中添加“！important”，它就开始工作了。
@media (min-width: 768px) {
.col-sm-pull-right {
float: right !important;
}
}
.lower {
clear: left;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
