Html 在较小的设备中，框的高度不是所需的大小-css_Html_Twitter Bootstrap_Css_Responsive Design

Html 在较小的设备中，框的高度不是所需的大小-css

html twitter-bootstrap css responsive-design

Html 在较小的设备中，框的高度不是所需的大小-css,html,twitter-bootstrap,css,responsive-design,Html,Twitter Bootstrap,Css,Responsive Design,我在将盒子的大小与移动设备匹配时遇到了一个问题（使用bootstrap）我有3个盒子，1号和2号是图像，3号是文本，看起来当我将屏幕大小调整为手机大小时，会发生这种情况（框号3高于框号2，或在某些设备中短于框号2，如下所示：我需要它看起来像那样（3号盒子和2号盒子一样高）：我尝试将最大高度和最小高度设置为box3，但这不是解决方案，因为它不适合所有设备 html: 这是2号信箱： .women-margin{ margin: -1px -15px -2px -17px; pos

我在将盒子的大小与移动设备匹配时遇到了一个问题（使用bootstrap）我有3个盒子，1号和2号是图像，3号是文本，看起来

当我将屏幕大小调整为手机大小时，会发生这种情况（框号3高于框号2，或在某些设备中短于框号2，如下所示：

我需要它看起来像那样（3号盒子和2号盒子一样高）：

我尝试将最大高度和最小高度设置为box3，但这不是解决方案，因为它不适合所有设备

html:

这是2号信箱：

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


引导3嵌套行和列的示例
/*一些自定义样式可以美化此示例*/
.主要内容{
最小高度：330px；
背景：#dbdfe5；
}
.侧边栏内容{
最小高度：150px；
边缘底部：30px；
背景#b4bac0；
}


引导3嵌套行和列的示例
/*一些自定义样式可以美化此示例*/
.主要内容{
最小高度：330px；
背景：#dbdfe5；
}
.侧边栏内容{
最小高度：150px；
边缘底部：30px；
背景#b4bac0；
}
.左{
背景：红色；
}
.box2{
背景：绿色；
身高：100%；
}
.box3{
身高：100%；
背景：蓝色；
}
.对{
背景：绿色；
保证金：0；
填充：0；
}



猎龙者


圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会
作为一名精英，我们暂时加入了劳工组织
多洛·阿利夸

请向我们展示您的代码。如果您不向我们展示您尝试过的内容，我们将无法帮助您…抱歉，添加的代码我想我可以尝试使用flexbox？如果您愿意。是的，这会有帮助，谢谢这不是我需要的，我需要手机中的2号框3位于1下方，桌面中的3号框位于1号框旁边。现在请查看桌面框2和3中的代码片段需要---next---到数字1。在移动框2和3中，需要在框1下使用col-lg-4用于桌面。如果您想要ipad设备屏幕，请使用col-md-4。有关更多参考，请参阅boostrap网格选项。我认为这是唯一的解决方案

    <div class="yellow-box">

  .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;
   }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Nested Rows and Columns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    /* Some custom styles to beautify this example */
    .main-content{
        min-height: 330px;
        background: #dbdfe5;
    }
    .sidebar-content{
        min-height: 150px;
        margin-bottom: 30px;
        background: #b4bac0;
    }
    .left{
        background: red;
    }
    .box2{
        background: green;
        height: 100%;
    }
    .box3{
        height: 100%;
        background: blue;
    }
    .right{
        background:green;
        margin:0;
        padding:0;
    }
</style>
</head>
<body>
    <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 left">
                <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="right col-lg-4 col-xl-4 col-md-12 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-md-6 box2">
                   <div class="women-margin">
                      <img src="images/women_3.png" alt="live" id="women-eyes1" >
                    </div>
                </div>
                <div class="col-lg-12 col-md-6 box3">
                    <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>
    </div>
  </section>
</body>
</html>