Question

Order of the divs in different screen sizes

您好。我在图片中有这样的情况。我需要在不同屏幕尺寸的特定位置使用bootstrap重新排序3个div元素。在移动设备上，它们必须在彼此之上（默认情况下） - 这没关系。平板电脑和笔记本电脑屏幕出现问题。对于平板电脑和笔记本电脑屏幕，第二个div必须放在左边。所以我使用.col-sm-6和.col-sm-pull-6类以及第一和第三div .col-sm-6 push-6。当div中没有内容时，一切都还可以，但是当我添加一些文本时，左边的div会推动另一个文件。如何在不将推送到右侧div的情况下实现平滑的文本添加。

对于大屏幕div 1添加隐藏类，所以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>

Answer 1

好的...问题是，在笔记本电脑/平板电脑中，你有col-sm-6 + col-sm-6 = col-md-12，它将等于一整行，然后是col- sm-6总是会成为一个新行。因此，当您向第一个col-sm-6（标题 - 全新闻）添加内容时，它会将最后一个col-sm-6（标题 - 右下角）向下推，因为它可以在下一行＆＃34;行＆＃34;。要解决此问题，您可以执行以下两项操作之一。

在平板电脑/笔记本电脑中清楚地将正确的两列定义为自己的列。这会导致重复的代码，你必须隐藏/显示，具体取决于屏幕大小，可能会很快变得混乱。
使用@media查询覆盖sm视图中元素的浮点数并删除推/拉

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似乎不支持媒体查询，所以我没有链接小提琴。我不能100％确定这是否适用于你的情况，但试一试并告诉我。

编辑：您可能需要第二个媒体查询来删除xs设备上的浮动。

@media (max-width: 768px;)
{
    .headline-right-top{
        float: none !important;
    }
}

Bootstrap 3向“推送”div添加内容会移动其他元素

1 个答案: