Order of the divs in different screen sizes
你好。我在图片中遇到过这样的情况。我需要在特定位置为不同的屏幕尺寸重新排序 3 个带有 Bootstrap 的 div 元素。 在移动设备上，它们必须彼此重叠(默认情况下)——这没关系。 问题出在平板电脑和笔记本电脑屏幕上。 对于平板电脑和笔记本电脑屏幕，第二个 div 必须放在左边。所以我使用 .col-sm-6 和 .col-sm-pull-6 类以及第一个和第三个 div .col-sm-6 push-6。当 div 中没有内容时，一切正常，但是当我添加一些文本时，左侧的 div 将另一个向下推。如何在不将推送到右侧 div 的情况下实现平滑的文本添加。
对于大屏div 1加了hidden class，所以2和3变成等高，这样也没有问题。 问题只出现在中小屏幕上。 提前致谢。
这里还有代码:
/* =============================
Base Element Styles
============================== */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #fff;
text-align: center;
padding-top: 55px;
}
/*===============================
Base Layout Styles
===============================*/
.navbar {
margin-bottom: 0;
}
/* Headline */
.headline {
margin-top: 20px;
margin-bottom: 20px;
}
p {
margin: 0;
}
.headline-right-top {
height: 100px;
background: rgba(0,0,0, 0.8);
}
.headline-left{
background: rgba(0,0,0, 0.3);
}
.headline-right-bottom {
background: rgba(0,0,51, 0.6);
}
/*===============================
Media Queries
=============================== rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale = 1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" media="screen">
<title>Newsfeed</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
Login bar
</div> <!-- /.login-bar -->
<div class="headline">
<div class="container">
<div class="row">
<div class="headline-right-top col-sm-6 col-sm-push-6 hidden-lg">
<div class="headline-see-all-news">
All News
</div>
<div class="banner-region-two">
Banner
</div>
</div>
<div class="headline-left col-sm-6 col-sm-pull-6 col-lg-pull-0">
<div class="headline-latest">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
<div class="headline-right-bottom col-sm-6 col-sm-push-6 col-lg-push-0">
<div class="headline-oppinions">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.headline -->
</body>
</html>最佳答案
好吧...所以问题是，在笔记本电脑/平板电脑中，您有 col-sm-6 + col-sm-6 = col-md-12 这将等于一整行，然后是一个 col- sm-6 总是会成为一个新行。因此，当您将内容添加到第一个 col-sm-6(标题-查看所有新闻)时，它会将最后一个 col-sm-6(标题-右下)向下推，因为它位于下一个“行”。要解决此问题，您可以执行以下两项操作之一。
在平板电脑/笔记本电脑中将右侧的两列明确定义为它们自己的列。这会导致重复的代码，您必须根据屏幕尺寸隐藏/显示这些代码，并且很快就会变得困惑。
用@media 查询覆盖 sm View 中元素上的 float 并移除推/拉
HTML:
<div class="container">
<div class="row">
<div class="headline-right-top col-sm-6 hidden-lg">
<div class="headline-see-all-news">
All News
</div>
<div class="banner-region-two">
Banner
</div>
</div>
<div class="headline-left col-sm-6 col-lg-pull-0">
<div class="headline-latest">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
<div class="headline-right-bottom col-sm-6 col-lg-push-0">
<div class="headline-oppinions">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis culpa, ducimus molestiae velit veritatis beatae necessitatibus! Eius nihil quidem odio enim eum, eaque quis amet repellendus officiis magni impedit nesciunt.</p>
</div>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
CSS:
@media (min-width: 768px;)
{
.headline-right-top{
float: right !important;
}
}
我已经用 jsfiddle 对此进行了测试，它似乎工作正常。 jsfiddle 似乎不支持媒体查询所以我没有链接 fiddle 。我不是 100% 确定这是否适合您的情况，但请尝试一下并告诉我。
编辑:您可能需要第二个媒体查询来删除 xs 设备上的 float 。
@media (max-width: 768px;)
{
.headline-right-top{
float: none !important;
}
}
关于html - Bootstrap 3 向 "pushed"div 添加内容会移动其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36285620/