Bootstrap 在所有屏幕尺寸下的固定高度列

Question

我有一个 HTML 元素，其中包含一个图像和一些彼此相邻的文本，使用引导程序定位如下：

<div class="row">
  <div class="col-md-6">
    <div class="avatar">
      <img src="<?= get_template_directory_uri(); ?>/dist/images/weare.png" alt="" class="img-responsive">
    </div>
  </div>
  <div class="col-md-6">
    <blockquote>
      <h1>Title</h1>
      <p>Text.</p>
    </blockquote>
  </div>
</div>

现在的问题是，当我在小屏幕上显示图像时，图像并没有占据画布的全尺寸。

在大屏幕上，文本框太大了

我在 bootstrap 和 flexbox 方面没有太多经验来解决这个问题，但我的目标是在所有屏幕尺寸上都有一个固定的高度。

Answer 1

这样试试

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<div class="row p-2">
  <div class="col-md-6">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the u</p>
  </blockquote>
</div>



<div class="row p-2">
  <div class="col-md-6 ">
    <div class="avatar"> <img src="https://preview.ibb.co/iQEpfb/Kuli_Postcard_STPATTYS2016_750x500_vz.png" alt="Kuli_Postcard_STPATTYS2016_750x500_vz" border="0" class="img-responsive"> </div>
    </div>
  <div class="col-md-6">
  <blockquote>
    <h1>Title</h1>
    <p>Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph.Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragrParagraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the uaph.</p>
  </blockquote>
</div>

Answer 2

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <div class="container-overflow-wrap">
    <div class="container">
        <div class="hidden-xs">
            <div class="row row-padded row-bordered row-centered">
                <div class="col-sm-6">
                    <div class="avatar">
                        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1">
                    <blockquote>
                        <h1>hi this a demo</h1>
                        <p>The Moon is a barren, rocky world without air and water. It has dark lava plain on its surface. The Moon has filled with craters. It has no light of its own. It gets its light from the Sun. The Moo keeps changing its shape as it moves around the Earth. It spins on its axis in 27.3 days stars were named after the Edwin Aldrin were the first ones to set their foot on the Moon on 21 July 1969 They reached the Moon in their spacecraft named Apollo II</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

试试这个可能对你有帮助