如何在同一行中设置不同的列大小？

Question

嗨，我正在创建一个使用引导程序的the应用程序，我对网格系统有一个问题。当我将元素添加到列中时，所有的列都一起拉伸.我只想要一个列的高度增加，而不是同一行中的所有列。见下文：

​

正如您所看到的，当添加"Line1“、"Line2”和"Line3“时，同一行中的容器也会拉伸。我只想要标题为“某事”的容器在垂直高度上增加。

这是我的代码：

       <SideNav>
      
      </SideNav>
  
      <div className='container-md mt-5'>
        <div className='row text-center'>
          <h4 className='mb-5'>"The body achives what the mind believes" - Alek Barns </h4>
          <div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Metric</div>
          <div className='col-md-1'></div>
          <div className='col-md-3 shadow p-3 mb-5 bg-white rounded display-6'>Goal</div>
          <div className='col-md-1'></div>
          <div className='col-md-4 shadow p-3 mb-5 bg-white rounded display-6'>Something
           <h4>Line 1</h4>
           <h4>Line 2</h4>
           <h4>Line 3</h4>
          </div>
        </div>
        <div className='row text-center'>
          <div class='col-md-8 shadow p-3 mb-5 bg-white rounded display-6'>
            <h2>Today's Workout: HIT Training</h2>
            <img src="https://media.flowin.com/blog/blog_654350014.jpg" class="img-fluid"></img>
          </div>
          <div class='col-md-2'></div>
          <div class='col-md-2 shadow p-3 mb-5 bg-white rounded display-6'>
            <h2>Friend Zone </h2>
            <h5>Most Workouts</h5>
            <h6>1. Kaasim - 12 Completed</h6>
            <h6>2. Bryan - 10 Completed</h6>
            <h6>3. Mo - 9 Completed</h6>
            <h6>4. Jung - 8 Completed</h6>
            <h6>5. Chris - 7 Completed</h6>
            <h6>6. Anna - 7 Completed</h6>
          </div>
        </div>
      </div>
      </body>

Answer 1

您可以通过在该列中添加-col-基线类来对齐您想要的列(不需要拉伸)。看看这个Codepen.io示例

/* use this class to align column */
.col-baseline {
  display: flex;
  align-self: baseline;
}

​

/* only for example purposes */
.bd-example {
    position: relative;
    padding: 1rem;
    margin: 1rem -15px 0;
    border: solid #f8f9fa;
    border-width: 0.2rem 0 0;
}
.bd-example-row .row>[class^="col-"] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.2);
}
/* end of: only for example purposes */

.col-baseline {
  display: flex;
  align-self: baseline;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bd-example bd-example-row">
  <div class="container">
    <div class="row">
      <div class="col-9">.col-9</div>
      <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
      <div class="col-6 col-baseline">.col-6<br>Subsequent columns continue along the new line.</div>
    </div>
  </div>
</div>

​

Answer 2

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div class='container-md mt-5'>
   <div class='row text-center'>
      <div class='col-md-4 d-flex'>
         <h4>Line 1</h4>
         <h4>Line 2</h4>
         <h4>Line 3</h4>
      </div>
   </div>
</div>

​

只需添加一个类“d-flex”