在引導程序中發現col-md和col-sm的問題

Question

我的日程安排是在筆記本電腦中並排顯示圖像和詳細信息 ，並在響應中單獨顯示它們。.它在無響應頁面中與col-md-6並排顯示詳細信息，但代碼不接受col-sm -12用於在響應狀態下單獨顯示細節

<section id="about-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-12 padding-0">
        <img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
      </div>
      <div class="col-md-6 col-sm-12 padding-0">
        <div class="col-details">
          <div class="col-details-title">
            ABOUT US
          </div>
          <div class="col-details-subtext">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
            <br>
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
          </div>
          <div>
            <button style="margin-left: 250px; margin-top: 50px;">View More</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

使用img-fluid成像（請參閱Fiddle： https : //jsfiddle.net/gpLyvr5w/6/ ）

在這里學習： https : //getbootstrap.com/docs/4.0/content/images/

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <section id="about-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-12 padding-0"> <img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices"> </div> <div class="col-md-6 col-sm-12 padding-0"> <div class="col-details"> <div class="col-details-title"> ABOUT US </div> <div class="col-details-subtext"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in! <br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim. </div> <div> <button style="margin-left: 250px; margin-top: 50px;">View More</button> </div> </div> </div> </div> </div> </section> 

Answer 2

很好的代碼class="col-md-6 col-sm-12 padding-0"表示在屏幕≥576px時，元素應采用可用寬度的全寬（aka width：100％），但是如果屏幕≥768px，則元素應占可用寬度的一半（也就是寬度：50％）。

因此，如果您需要包含圖像的div和包含詳細信息的div在≥768px的屏幕上並排顯示（通常是平板電腦處於縱向模式），則只需使用col-md-6 ，而無需指定col-sm-12默認的div元素是塊級元素，並占用可用空間的完整寬度。

另外，您不需要padding-0類，則可以使用Bootstrap 4的間距類（例如p-0，p-1，p-3，pt-1，py-3等）來刪除或添加填充，因此您的最終類應該看起來像這樣：

class="col-md-6 p-0"

Answer 3

您需要在第一個col-md-6中給額外的類，我已經給了類名res，並為此編寫了一個媒體查詢

    <style>
         @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
         {
          .res{
                min-width:100%;
           }
         }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-12 padding-0 res">
        <img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
      </div>
      <div class="col-md-6 col-sm-12 padding-0">
        <div class="col-details">
          <div class="col-details-title">
            ABOUT US
          </div>
          <div class="col-details-subtext">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
            <br>
            <br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
          </div>
          <div>
            <button style="margin-left: 250px; margin-top: 50px;">View More</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 4

大家好，我已經解決了這個問題..在標頭中遺漏了META標記