在所有屏幕的自举固定高度的cols尺寸

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> 

现在的问题是，当我走在小屏幕上图像不走的是帆布的全尺寸。

，并在大屏幕上的文本框是太大

我没有与引导和Flexbox的很多经验也解决此问题，但我的目标是在所有屏幕尺寸上都有固定的高度。

Answer 1

给图像的CSS：

max-width:100%; 

这应该修复它。也许。

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>

试试这个，它可以帮助你

Answer 3

尝试像这样

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