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宽度：100％），但是如果屏幕≥768px，则元素应采用可用宽度的一半（又名宽度：50％）。

因此，如果您需要包含div的图像和包含详细信息的div在≥768px的屏幕上并排显示（通常为平板电脑为纵向模式），则只需使用col-md-6，就无需指定{{1} }，默认情况下div元素是块级元素，并占用可用空间的全部宽度。

您也不需要col-sm-12类，可以使用Bootstrap 4的间距类（例如p-0，p-1，p-3，pt-1，py-3等）来删除或添加填充因此您的最终课程应该如下所示：

padding-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标记

在引导程序中发现col-md和col-sm的问题

4 个答案: