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

试试这可能会对你有所帮助

Answer 2

试试这个

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

Boostrap固定高度cols适用于所有屏幕尺寸

2 个答案: