상자 크기를 모바일 CSS 부츠랩과 일치시키는 데 문제가 있음

상자 크기를 모바일에 맞추는 문제가 발생했습니다 (부트 스트랩 사용) 3 상자, 1과 2는 이미지이고 3은 3 상자가 있습니다. 텍스트, 을 가지고 있으며, 나는 모바일 크기로 화면 크기를 조정할 때 이것이 (상자 3 번 여기에 같은 상자 번호 2보다 짧은 높거나 일부 장치에 발생하는 것입니다 like this 상자 크기를 모바일 CSS 부츠랩과 일치시키는 데 문제가 있음

보이는 : error

내가 필요 그것은 (2와 같은 높이의 상자 번호 3)처럼 보입니다 :

box3에 최대 높이와 최소 높이를 설정하려고했지만 모든 장치와 일치하지 않기 때문에 해결책이 아닙니다.

HTML :

<section id="carousel-section"> 

    <div class="container-fluid"> 

    <div class="row feature"> 
     <div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 "> 
      <div class="carousel-margin"> 
<div id="myCarousel" class="carousel1 slide container-carousel" data- 
ride="carousel1"> 
    <!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
<div class="item active"> 
    <img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic" 
    id="mainImage1" > 
</div> 

</div> 

    </div> 
     </div> 
     </div> 
      <div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 "> 

     <div class="women-margin"> 
    <img src="images/women_3.png" alt="live" id="women-eyes1" > 
      </div> 
      </div> 




    <div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 "> 

     <div class="yellow-box"> 


     <h2 id="change_h2">THE DRAGON HUNTER</h2> 
      <br/> 
      <p id="change_p"> Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
     dolor aliqua. </p> 

     </div> 


     </div> 

    </div> 
</div> 

    </section>

이되는 문제 상자, 박스 번호 3 :

<div class="yellow-box">

CSS :

.yellow-box{ 
position: relative; 

display: block; 
    background-repeat: no-repeat; 
    background-size: cover; 

    min-height: 204px; 
margin-top:150px; 
background-color: #e6ff00; 
margin-left: -15px; 
margin-right: -15px; 


    }

이 박스 번호 2 :

.women-margin{ 
    margin: -1px -15px -2px -17px; 
position: relative; 
display: block; 
padding-right: 0; 
    }

,174,

출처

2017-11-14 rir eij

행에서 플렉스를 시도하십시오. 일부 구형 브라우저에서는 작동하지 않습니다.

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
}

참조 : http://getbootstrap.com.vn/examples/equal-height-columns/

를 사용하여 미디어 쿼리 어쩌면 유일한 모바일 뷰 : 이것은 당신이 시도 할 수있는 샘플이

@media (max-width:768px) { 
    .row-eq-height { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display:   flex; 
    } 

}

, 플렉스는 열 동일한 높이를 만들지 만, 실제로는 모순이다 부트 스트랩과 플렉스를 함께 사용하십시오. 하지만 귀하의 특정 코드를 수정하려고 :

<html> 
<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<link rel="stylesheet" href="css.css"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 
<body> 
<style> 
    .yellow-box{ 
position: relative; 

display: block; 
    background-repeat: no-repeat; 
    background-size: cover; 

    min-height: 204px; 
margin-top:150px; 
background-color: #e6ff00; 
margin-left: -15px; 
margin-right: -15px; 


    } 
.women-margin{ 
    margin: -1px -15px -2px -17px; 
position: relative; 
display: block; 
padding-right: 0; 
    } 
    .row { 
     display: flex; 
     flex-wrap: wrap; 
    } 
</style> 
<section id="carousel-section"> 
    <div class="container-fluid"> 
     <div class="row feature"> 
      <div class="col-lg-8 col-md-12"> 
       <div class="carousel-margin"> 
        <div id="myCarousel" class="carousel1 slide container-carousel" data- 
        ride="carousel1"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#myCarousel" data-slide-to="1"></li> 
        <li data-target="#myCarousel" data-slide-to="2"></li> 
        </ol> 
        <!-- Wrapper for slides --> 
         <div class="carousel-inner"> 
          <div class="item active"> 
           <img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic" id="mainImage1" > 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-4 col-md-5"> 
       <div class="women-margin"> 
        <img src="images/women_3.png" alt="live" id="women-eyes1" > 
       </div> 
      </div> 
      <div class="col-lg-4 col-md-7"> 
       <div class="yellow-box"> 
        <h2 id="change_h2">THE DRAGON HUNTER</h2> 
        <br/> 
        <p id="change_p"> Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
        dolor aliqua. </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
</body> 
</html>

출처

2017-11-15 00:12:22 Rustyjim

나는 그걸 추가하려고하지만 그때 그것은 모바일에서 상자 2와 3이 사라집니다. 코드에서 이것을 결합하는 방법을 보여 주시겠습니까? –

상자 크기를 모바일 CSS 부츠랩과 일치시키는 데 문제가 있음

답변

관련 문제