1. ホーム
  2. 質問と答え
  3. モバイルCSSブーツラップにボックスのサイズを合わせる際に問題が発生する

モバイルCSSブーツラップにボックスのサイズを合わせる際に問題が発生する

2017-11-14 6 views
0

ボックスサイズをモバイルに合わせる（ブートストラップを使用する）問題に直面しています 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; 
    }

出典

2017-11-14 rir eij

答えて

0

行をフレックスしてみてください。古いブラウザでは動作しません。

.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

+0

私はそれを追加しようとしましたが、その後、それは携帯で箱2と3を消えるを、あなたはコードでこれをどのように組み合わせるかを私に示してくださいすることができますか？ –

 関連する問題

  • 関連する問題はありません^_^