如何使用引导程序垂直对齐不同大小的文本

Question

Alright, so I've gone through and have tried several different solutions but I haven't found one that works the way I want it to so hence me reaching out for help.

Here is an example of my current code:

<div class="row">
  <div class="col-md-3">
    <h3>
      Operating Systems:
    </h3>
  </div>
  <div class="col-md-8">
    <ul>
      <li>Windows</li>
      <li>Linux</li>
    </ul>
  </div>
</div>

This gives me the following: screenshot

By adding the following style to the columns:

<style>
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
</style>

I get it to display what I want when it is expanded with the text from each column aligned along the top.

The issue with this is that when resized to a small size it displays it like it is shown here where as I want it to display as the hardware section does.

So here is my question: Is there a way with bootstrap to get it to display how I want it in both cases or do I have to choose one or the other?

Answer 1

尝试将col-md-x更改为col-xs-x

Answer 2

Use a media query to only apply the centering styles on larger widths. The margin of the h3 is effecting the vertical alignment so you may want to adjust that. Also IMO, flexbox is a better alignment method...

@media (min-width:768px) {
    .flex {
        display:flex;
        align-items:center;
    }
    h3 {
        margin-top:5px;
    }
}

http://www.codeply.com/go/hR8GJDwdL1