배경색 / 이미지가 이전 행 (부트 스트랩)에 나타나지 않도록하려면 어떻게해야합니까?

debugcn 에 게시 Dev

크레이그

라는 제목의 행에 배경 이미지 / 색상을 적용하려고합니다 <div class="row-fluid promotion">. 그러나 이러한 배경을 설정 <div class="row-fluid products-row">하면 유사한 문제가있는 몇 가지 기사를 보았습니다. 라는 제목의 배경이 이전 행 에 나타나지만 해당 솔루션이 내 문제에 답하지 않는 것 같습니다.

HTML / PHP

<div class="row-fluid products-row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 product-image-links" id="product-image-a">
            <a href="https://www.example.com/product-a/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-a.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-a/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product A</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-image-b">
            <a href="https://www.example.com/product-b/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-b.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-b/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product B</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
        </div>

        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-c">
            <a href="https://www.example.com/product-c/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-c.jpg" height="200" width="200"></a>
            <h3 class="button"><a href="https://www.example.com/product-c/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product C</span><i class="fa fa-cirlce" aria-hidden="true"></i></a></h3>
        </div>
    </div>

    <div class="row-fluid promotion">
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
            <p>Text Text Text</p>  
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <p>Text Text Text</p>
        </div>
    </div>

CSS

.products-row{
    text-align: center;
}
#product-image-a{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-b{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-left: 2%;
    margin-right: 4%;
    margin-bottom: 50px;
}
#product-image-c{
    width: 29.3%;
    border-radius: 25px;
    list-style-type: none;
    background-color: green;
    background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png"); 
    padding-top: 25px;
    padding-bottom: 10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    margin-right: 2%;
    margin-bottom: 50px;
}
.button{
    background-color: green;
    font-weight: bold;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 40px;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000; 
}
.product-title{
    padding-left: 20px;
    padding-right: 20px;    
}
.promotion{
    background: silver;
    height: 30px;
    background-image: url(http://www.example.com/wp-content/uploads/2017/03/pattern.png);
}

굶주림

당신은 변경할 필요 .row-fluid에 .row.

그것에 있는 유일한 Grid System 클래스 -fluid는 .container-fluid. 때문에 .row-fluid존재하지 .row않는, .row-fluid당신의 열 요소의 수레 (이 취소 할 수 없습니다 .row않습니다).

무슨 일이 일어나고 있으며 일반적으로 어떻게 해결합니까?

한 행의 배경이 이전 행 뒤로 이동하는 이유는 행에 부동 자식 요소가 있기 때문입니다. 이런 일이 발생하면 부모가 무너지고 높이가 없습니다. 플로팅 요소가 정상적인 문서 흐름에서 벗어나 공간을 차지하지 않기 때문에 부모가 축소됩니다.

회색 배경을 본 유일한 이유는 30px을 .row-fluid통해 높이를 설정했기 때문 .promotion입니다. 그렇지 않으면 해당 행도 축소되어 회색 배경이 숨겨집니다.

아래 스 니펫에서 컨테이너 .row요소 의 금색 배경은 자식이 떠 있고 공간을 차지하지 않기 때문에 볼 수 없습니다 .

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: gold;
}

.row > div {
  float: left;
  width: 33.333%;
  min-height: 35px;
  border: 1px solid #444;
}

<div class="row">
  <div></div>
  <div></div>
  <div></div>
</div>

이것을 수정하기 위해 필요한 것은 명확한 수정입니다. 일반적으로 Micro Clearfix를 권장 하지만 Bootstrap 3을 사용하고 있으며 해당 행 클래스에는 clearfix가 내장되어 있습니다. clearfix는 새 블록 서식 컨텍스트를 생성하므로 부모 요소가 축소되지 않고 배경 및 테두리와 같은 항목이 의도 한대로 적용될 수 있습니다. .

다음 스 니펫에서는 첫 번째 예제에서 플로팅 된 하위 요소를 지워 상위 요소가 축소되지 않고 금색 배경을 볼 수 있습니다. 이것이하는 일 .row입니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.row {
  background-color: gold;
}

.row > div {
  float: left;
  width: 33.333%;
  min-height: 35px;
  border: 1px solid #444;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

<div class="row cf">
  <div></div>
  <div></div>
  <div></div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-17

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사