个人中心
gpt4 book ai didi

html - 将盒子的大小与移动 css bootstrap 匹配的问题

转载 作者：行者123 更新时间：2023-11-28 02:38:41 27 4
gpt4 key购买 nike

我在将盒子的大小与移动设备匹配时遇到了问题(使用 Bootstrap )我有 3 个盒子，1 号和 2 号是图片，3 号是文字，它看起来like this

当我将屏幕调整为移动尺寸时，会发生这种情况(框号 3 高于或在某些设备中比框号 2 短，如下所示:error

我需要它看起来像那样(3 号框与 2 号框高度相同):desired output

我尝试将最大高度和最小高度设置为 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;
   }

最佳答案

在行上尝试 flex。在某些较旧的浏览器中不起作用。

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

参见:http://getbootstrap.com.vn/examples/equal-height-columns/

可能仅针对移动 View 使用媒体查询:

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

}

这是一个你可以尝试的示例，flex 使列等高，但实际上将 Bootstrap 和 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>

关于html - 将盒子的大小与移动 css bootstrap 匹配的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47291925/

27 4 0
文章推荐： CSS::焦点:之前不起作用
文章推荐： javascript - Electron 上的多个http页面
文章推荐： javascript - 使用closure-compiler自动编译javascript源代码
文章推荐： html - Bootstrap 4 Navbar-品牌垂直对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com