Question

I tried using flex, but still column heights are not same and a few methods mentioned in w3schools and medium but of no use. Using flex method worked for first time but when I refresh again its gone, I don't understand why this is happening.

Is there anything wrong in this code? please help me with this.

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

output image

Answer 1

Here's a slightly cleaned up version. I added borders of different colors to the classes so you could see how things were interacting.

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>

Answer 2

Here's an example from my own code you might find useful. This is in an included CSS file, not a "style" section. (this particular code involves ULs that get displayed in columns with boxes around them):

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

Answer 3

Your code IS working, but the .col-md-6 are the same height, not the p.

Remove the background-color from the p and add:

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

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

What can I do to get the same column heights?

3 个答案: