时间戳

首页 > 解决方案 > Flexbox paddings（占据超过 100% 的宽度）

html - Flexbox paddings（占据超过 100% 的宽度）

问题描述

我正在与@c4rlosls 合作，我们有两个问题：https ://imgur.com/a/PTF7ako 如果container-fluid父亲有px-0，它占据了超过 100% 的宽度。并且没有得到他们父亲 div 的 100% 宽度.cont2 a 。.cont3 a

我该如何解决这两个问题？

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

标签： htmlcssflexboxbootstrap-4

解决方案

In this you have to do below changes in your code to solve issue.

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

In above code i have added "no-gutters" in row after col-xl-4 which solve scrollbar problem... And i have remove <div class=row> from 2nd column(inew2,inew3) which solve your title background issue..

推荐阅读