文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >防止两个引导容器相互重叠。？

问防止两个引导容器相互重叠。？
EN

Stack Overflow用户
提问于 2018-09-16 21:07:29
回答 1查看 735关注 0票数 0

按相对位置更新。

代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<style>

@media (max-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 576px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 499px;
	height: 100px;
	right: 0px;
}
}

@media (min-width: 992px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 45px;
}
}

@media (min-width: 1200px) {
.first {
	position: relative;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
	clear: both;
}
.second {
	position: relative;
	width: 600px;
	height: 400px;
	right: -422px;
clear: both;
top: -294px;
}
}
.zero-padding {
	padding: 0px !important;
}

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}


.element {
  @include clearfix;
}
</style>

<!-- Our story Section Start -->
	
	<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
		</div>
	</div>
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->
	
	<div class="clearfix"></div>
	
	<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
	</div>
	
		<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->

​

我被困在重叠，即使我的两个容器是分开的，但我仍然不知道是什么使他们看起来像这样在lg和xl屏幕大小。下面是我的代码片段，让我知道是什么原因导致它们像这样相互重叠。我相信在多大程度上，位置发生了问题，但是如果我改变了任何元素的位置，它就会变得一团糟。

这是我要实现的目标。

​

​

代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<style>

.smaller-border {
	border-bottom: 3px solid red;
	width: 100px;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}
.gradient-color {
	background: linear-gradient(to left, #280489 20%, #e24301 100%);
	background-clip: text;
	text-fill-color: transparent;
	color: transparent;
	font-family: "HelveticaNeue";
	font-weight: bold;
}
.left-btn {
	float: left;
}

@media (max-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 576px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 499px;
	height: 100px;
	right: 0px;
}
}

@media (min-width: 992px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 45px;
}
}

@media (min-width: 1200px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
	clear: both;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 163px;
	clear: both;
}
}
.zero-padding {
	padding: 0px !important;
}

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}


.element {
  @include clearfix;
}

</style>

	<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->
	
	<div class="clearfix"></div>
	
		<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->

​

twitter-bootstrap-3
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-16 21:45:08

你可以使用一些负值来实现这一点，而不需要绝对的位置。

下面是一个基于代码的简化示例(为了保留最重要的代码，我删除了额外的视觉样式)

​

代码语言：javascript
复制
.smaller-border {
  border-bottom: 3px solid red;
  width: 100px;
  border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
  border-image-slice: 1;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

.left-btn {
  float: left;
}

.first p {
  margin-bottom: 40px;
  padding: 40px;
  margin-right: -100px;
  border: 2px solid;
  position: relative;
  z-index: 22;
  background: #fff;
}

.second img {
  margin-top: 50px;
}

.zero-padding {
  padding: 0px !important;
}

@media all and (max-width:767px) {
  .first p {
    margin-right: 0;
  }
}
代码语言：javascript
复制
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image"> </div>
  </div>
</div>
<!-- end -->

<div class="clearfix"></div>

<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image"> </div>
  </div>
</div>
<!-- end -->

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52358380

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档