在所有屏幕的自舉固定高度的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>