如何使3个不同的文本框具有相同的高度（处于响应状态）

时间：2018-05-02 12:06:44

标签： html css twitter-bootstrap-3

我使用Bootstrap V3.3.5。屏幕分为3列水平。 每列的文字长度不同，可以由用户更改。

列是响应水平的（通过Bootstrap）。

目标......如何解决：我希望这3个列的相同高度。每个列框必须具有最高列框的高度....所以所有列框都具有相同的高度。

除了....在Bootstrap＆＃34; xs＆＃34;模式，盒子是垂直的（没有问题）。 问题出在＆＃34; sm，md和lg＆＃34;当列彼此相邻时，模式（Bootstrap）。

编辑：

我认为问题出现在文本中，但它似乎位于引导程序 MODAL 的按钮中...所以我没有将模态代码放在第一个代码。

我做了：放置style="white-space: normal;"（以适合模态中的文字） - 似乎与此风格存在冲突

通缉：

  • 模式按钮高度在bootstrap sm，md，lg模式下（最大按钮的高度）相同
  • 文字以相同的高度开始
  • 文字适合按钮

在整页模式下查看代码段！

代码：

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
<style>
.row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
@media (max-width: 768px) {
.row {
	flex-wrap: wrap;
}
}
.row > [class*='col-'] {
   display: flex;
   flex-direction: column;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>

<!-- 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">

</head>

<body>
  <!-- BootsTrap V 3.3.5 -->
  <div class="container-fluid">
  <div class="row RowHeight" >
		<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_1" style="white-space: normal;">
  Launch demo modal 11 11 111 111
</button>

<!-- Modal -->
<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel_1">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>		</div><!-- col2 -->
<!-- Button trigger modal (end) -->

		<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_2" style="white-space: normal;">
  Launch demo modal 2222 222 222 222 222 222 222  22222222 22 22222 2222
</button>

<!-- Modal -->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel_2">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>		</div><!-- col2 -->
<!-- Button trigger modal (end) -->

  </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

使用flexbox来实现它，您可以根据最大高度列轻松地为所有.box设置相同的高度，我根据您的代码做了一个简短的示例，看看：

＆＃13;
＆＃13; 
.box {
  background-color: lightgray;
  margin-left: 10px;
}

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

.row > [class*='col-'] {
   display: flex;
   flex-direction: column;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">

<!-- 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>

<body>
  <!-- BootsTrap V 3.3.5 -->
  <div class="container-fluid">
  <div class="row" >
    <!-- for test! -->
    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet</p>
    </div>

    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
    </div>

    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
    </div>
  </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你也可以尝试这样：

.box {
  background-color: lightgray;
  padding: 5px 10px;
  min-height: 200px;
}

@media (max-width: 768px) {
  .box {
    min-height: auto;
    margin-bottom: 15px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <!-- for test! -->
  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
    </div>
  </div>
</div>

答案 2 :(得分：0)

可以在onload函数`

上添加它 
var heighest = document.getElementsByClassName("box")[0].offsetHeight;

for(i = 1;i<3; i++){
    if(heighest < document.getElementsByClassName("box")[i].offsetHeight){
      heighest  = document.getElementsByClassName("box")[i].offsetHeight;
    }
}`

之后你可以使用heighest 

.box {
  background-color: lightgray;
  height: heighest;
}

答案 3 :(得分：-1)

最简单的解决方案是为您的＆＃34;框指定一个硬编码高度。 class，基于您的最高列框，例如：

from collections import defaultdict

dictionary = {"key":[5, "string1"], "key2":[2, "string2"], "key3":[3, "string1"]}

d = defaultdict(int)

for num, cat in dictionary.values():
    d[cat] += num

print(d)

defaultdict(<class 'int'>, {'string1': 8, 'string2': 2})

其他解决方案可能是通过JavaScript计算您的最高列框高度，并通过JS动态地为其他2个框分配相同的高度。

相关问题
最新问题