Предотвратить два бутстрепа контейнерного перекрытия друг друга. - PullRequest
Новая
       17

Предотвратить два бутстрепа контейнерного перекрытия друг друга.

0 голосов
/ 17 сентября 2018

Обновлено с относительной позиции.

<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.Вот мой фрагмент кода, дайте мне знать, что заставляет их перекрывать друг друга, как это.Как далеко я верю, что с позициями что-то не так, но если я меняю положение какого-либо элемента, все портится.

Вот моя цель для достижения.enter image description here

<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 -->

1 Ответ

0 голосов
/ 17 сентября 2018

Вы можете добиться этого, используя некоторую отрицательную маржу и без необходимости абсолютной позиции.

Вот упрощенный пример, основанный на вашем коде (я удалил дополнительные визуальные стили, чтобы сохранить самый важный код) 

.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;
  }
}
<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 -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...