在引导程序中查找 col-md 和 col-sm 的问题答案

【问题标题】：Finding issue with col-md and col-sm in bootstrap在引导程序中查找 col-md 和 col-sm 的问题
【发布时间】：2018-06-27 07:03:40
【问题描述】：

我的议程是在笔记本电脑中并排显示图像和 详细信息，并以响应方式分别显示它们。它适用于显示详细信息的非响应页面与 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>

【问题讨论】：

您使用col-sm定位的屏幕尺寸
你声明 sm 为col-sm-12 你应该改成col-sm-6
现在请检查代码。我给了它 col-sm-12
如果您的目标屏幕尺寸为 320 像素，您应该使用 col-xs-6 而不是 col-sm-6，因为您似乎使用的是 bootstrap4。
@rajiv 如果您的目标屏幕尺寸为 320 像素，则应更改为 col-12，因为这是超小屏幕的类前缀。在这里查看getbootstrap.com/docs/4.1/layout/grid

标签： html css bootstrap-4

【解决方案1】：

使用img-fluid 成像（参见小提琴：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>

【讨论】：

不完全...但这对我的代码也有帮助..错过了元标记...初学者错误。

【解决方案2】：

好吧，代码class="col-md-6 col-sm-12 padding-0" 意味着在屏幕≥576px 时，元素应占可用宽度的全宽（又名宽度：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"

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

大家好，我已经解决了这个问题.. 已经错过了标题中的元标记

【讨论】：