Question

我正在使用@ c4rlosls，我们有2个问题：https://imgur.com/a/PTF7ako 如果container-fluid的父亲有px-0，则其占用的宽度超过100％。而且.cont2 a和.cont3 a的父亲的div宽度没有100％。

如何解决这两个问题？

.inew1{
	background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}
.inew2{
	background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}
.inew3{
	background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}

 <div class="container-fluid px-0 "> 
      <div class="row no-gutters">
          <div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
          	

          	
          	<a href="google.uno" class="w-100">
              <h1 class="">Title</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
          </div>
          


        <div class="container-fluid col-xl-4 col-lg-12 ">
          <div class="row">
            <div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
            <div class="row">
          	<a href="google.uno" class="w-100">
              <h1 class="">Title2</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
            </div>
            </div>
            <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
            <div class="row">
          	<a href="google.uno">
              <h1 class="">Title3</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
            </div>
            </div>
          </div>
        </div>
      </div>
</div>

Answer 1

我为您制作了一个模板。您可以使用它。

body {
  margin:0;
  padding:0;
}

.flex {
  display:flex;
  width:100%;
}
.col1 {
  flex:3;
  height:500px;
}
.col2 {
  flex:2;
  display:flex;
  flex-direction:column;
  height:500px;
}

.bg {
  background:url("https://picsum.photos/800/600");
  width:100%;
  height:100%;
  position:relative;
}

.bg2 {
  background:url("https://picsum.photos/600/800");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.bg3 {
  background:url("https://picsum.photos/500/400");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.text_area {
  box-sizing:border-box;
  height:70px;
  padding:20px;
  background:rgba(0,0,0,.7);
  width:100%;
  display:flex;
  flex-direction:column;
  position:absolute;
  bottom:0;
  left:0;
  justify-content:center;
}

.text_area .title {
  color:#fff;
  font-weight:600;
  font-size:28px;
  font-family:sans-serif;
}

.text_area .description {
  color:#fff;
  font-weight:400;
  font-size:12px;
  font-family:sans-serif;
}

@media screen and (max-width:728px){
  .flex {
    flex-direction:column;
  }
  .col1 {
    height:250px;
  }
}

<div class="flex">
  <div class="col1">
    <div class="bg">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
    </div>
  </div>
    <div class="col2">
    <div class="bg2">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
      </div>
    <div class="bg3">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
      </div>
  </div>
</div>

Answer 2

在这种情况下，您必须在代码中进行以下更改以解决问题。

<div class="container-fluid px-0 "> 
  <div class="row no-gutters">
      <div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">



        <a href="google.uno" class="w-100">
          <h1 class="">Title</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>
      </div>



    <div class="container-fluid col-xl-4 col-lg-12 ">
      <div class="row no-gutters">
        <div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">

        <a href="google.uno" class="w-100">
          <h1 class="">Title2</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>
        </div>

        <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">

        <a href="google.uno" class="w-100">
          <h1 class="">Title3</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>

        </div>
      </div>
    </div>
  </div>

在上面的代码中，我在col-xl-4之后的行中添加了“ no-gutters”，以解决滚动条问题... 我已经从第二列（inew2，inew3）中删除了<div class=row>，这解决了您的标题背景问题。

Flexbox填充（占用宽度超过100％）

2 个答案: