我该怎么做才能获得相同的列高？ [复制]答案

【问题标题】：What can I do to get the same column heights? [duplicate]我该怎么做才能获得相同的列高？ [复制]
【发布时间】：2018-03-26 06:59:59
【问题描述】：

我尝试使用 flex，但列高仍然不一样，并且在 w3schools 和 medium 中提到了一些方法，但没有用。第一次使用 flex 方法有效，但是当我再次刷新时它消失了，我不明白为什么会发生这种情况。

这段代码有什么问题吗？请帮帮我。

<html>
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <title>Bootstrap Page</title>
    <style>
        p{
            background:rgba(25,105,25,0.4);
            color:white;
         }
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .row > .col-md-6 {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row display-flex">
            <div class="col-md-6 para1">
                <div>
                    <p>M. Best who informed him that locomotives 
                       could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y
                       ucatán..</p>
                </div>
            </div>
            <div class="col-md-6 para1">
                <div>
                    <p> Best who informed him that locomotives 
                            could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme
                        nt of the Walt Disney World Railroad from the late 1960s to its opening in 1971 was overseen by Roger E. Broggie,
                         vice president and general manager of Mapo, Inc</p> 
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

列宽还是列高？您的问题标题同时提及，而您的问题正文均未提及。
您肯定缺少p 元素的样式声明的结束标记...
列高和'p'没有结束标签没有丢失.....
实际上这个截图是在删除一些应用于段落的样式之前拍摄的。这就是为什么缺少“p”结束标签的原因。但是问题仍然存在。
只需在内部 div 上使用 h-100 类或 <p>。你不需要所有额外的 flexbox 东西。 codeply.com/go/5msONxe8fg

标签： html css flexbox bootstrap-4

【解决方案1】：

这是一个稍微清理过的版本。我为类添加了不同颜色的边框，以便您可以看到事物是如何交互的。

p {
  background-color: rgba(25, 105, 25, 0.4);
  color: white;
  border: 1px solid green;
  box-sizing: border-box;
  padding: 10px;
}

.container {
  border: 1px solid red;
}

.row {
  border: 1px solid blue;
}

.div {
  border: 1px solid orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <title>Bootstrap Page</title>

</head>

<body>
  <div class="container d-flex">
    <div class="row d-flex">
      <div class="col-6 d-flex align-items-stretch">
        <p>M. Best who informed him that locomotives could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y ucatán..
        </p>
      </div>
      <div class="col-6 d-flex align-items-stretch">
        <p> Best who informed him that locomotives could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme nt of the Walt Disney World Railroad from the
          late 1960s to its opening in 1971 was overseen by Roger E. Broggie, vice president and general manager of Mapo, Inc
       </p>
      </div>
    </div>
  </div>
</body>

【讨论】：

谢谢你炒作这段代码看起来很简单
这是使用 Bootstrap 4 的方法。
为什么要使用所有额外的 flexbox 类？只需在列内容上使用h-100。

【解决方案2】：

您的代码有效，但 .col-md-6 的高度相同，而不是 p。

从p 中删除background-color 并添加：

.col-md-6 > div {
    height: 100%;
    background:rgba(25,105,25,0.4);
}

https://jsfiddle.net/q2tteygo/4/

【讨论】：

【解决方案3】：

这是我自己的代码中的一个示例，您可能会觉得有用。这是在包含的 CSS 文件中，而不是“样式”部分。（此特定代码涉及显示在带有框的列中的 UL）：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic');
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

body {
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 2em;
    @include flexbox();
}

/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
li.columns {
    @include flex(1 200px);
    @include order(2);
    -moz-display: inline-flex;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    align-items: stretch;
    list-style-type: none;
    min-width:60%;
    padding: 0;
    margin: 5px 0px 10px 0px;
    border: 1px solid #17100F;
    font-size:.95em;
}

ul.level2listing li.columns {
    margin-left:-40px;
}

ul.level3listing li.columns {
    margin-left:-80px;
}

li.columns div {
    margin:0;
    padding: 2px;
}

li.columns div.col {
    flex: 1 auto;
    border: 1px solid #17100F;
    padding: 0;
    margin:0;
}

li.columns div.col div {
    padding:auto 4px;
}

li.columns div.col div.xxx {
    font-size:.95em;
}

li.columns .header, table.tablelisting th {
    background: #2d201d;
    color:#ffecdd;
    font-weight: bold;
    margin:0;
    padding: 2px 5px;
}

li.columns .header a, table.tablelisting th a {
    color:#ffdddd;
}

【讨论】：

真的很感谢你。但是如果我知道为什么我的代码不工作会很有帮助....