Question

为什么inew2和inew3的div父亲的宽度没有100％？ https://imgur.com/a/xPktdEU

html, body{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.ibrands{
	height: 120px;
	background-color: blue;
}

@media only screen and (min-width: 992px) {

.navbar {
	height: 80px;
}
.inew1{
	height: 720px;
	background: red;

}
.inew2{
	height: 360px;
		background: yellow;
		width: 100%;
}
.inew3{
	height: 360px;
}
.ibrands a{
	margin-left: 20px;
	margin-right: 20px; 
}
}

 <div class="container-fluid"> 
      <div class="row">
          <div class="col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
              <h1 class="">Título</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veritatis repudiandae unde, placeat iste eaque omnis necessitatibus, ratione, distinctio laboriosam rem, at porro aut saepe quia. Voluptas dicta alias, molestiae!</p>
          </div>
        <div class="col-xl-4 col-lg-12">
            <div class="col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
                            <h1 class="">Títle2</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
            </div>
            <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
                            <h1 class="">Títle3</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
            </div>
        </div>
      </div>

      <div class="row ibrands">
            <div class="col-12 d-flex justify-content-center align-items-center ">
            <a href="" class="">a</a>
            <a href="" class="">b</a>
            <a href="" class="">s</a>
            </div>
      </div>
    </div>

Answer 1

嵌套时添加.row。它将消除左侧和右侧的多余边距。

<div class="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">
                        <h1 class="">Títle2</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
        </div>
        <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
                        <h1 class="">Títle3</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolores accusantium, eius inventore nemo molestiae dolore ex voluptates et aut incidunt eligendi vel asperiores maxime soluta tenetur id exercitationem magnam!</p>
        </div>
    </div>
</div>

col-xl-12不是div父亲的100％

1 个答案: