Bootstrap 4.1 列内的额外填充答案

【问题标题】：Bootstrap 4.1 extra padding inside columnBootstrap 4.1 列内的额外填充
【发布时间】：2018-12-17 23:03:47
【问题描述】：

在转换到 bootstrap 4.1 后遇到了一些问题。我的水平卡在 4.0-alpha 中运行良好，但现在没那么多了。以下屏幕截图显示了两次尝试将水平卡片与右侧的大约 75% 卡片文本和 25% 图像缩略图对齐。第一次尝试是一个包含两列的基本行，第二次尝试取自示例here（请参阅中途卡片）。我更喜欢简单的维护，但第二个示例显然看起来更好（如果您删除边框颜色），但无论哪种情况，我都会在图像周围获得额外的填充，并且 75:25 的比例不稳定，具体取决于图像大小。如果可能的话，想要响应速度最快的解决方案和可维护的解决方案（我知道……吃蛋糕的乞丐）。

目标：将大小相等的水平卡片对齐在中心列中，每张卡片大约 75% 的卡片文字和 25% 的图片。我希望能够根据我想要的图像大小或图像 div 的大小来调整这个比率。因此，如果我增加图像大小/最大宽度，它将增加图像列/flex-row/whatever，或者增加图像 div 将减少卡片文本 div。但无论原生图像大小如何，它都应该填充没有填充的列。

*另外，两张卡片都在同一个父容器中，所以我不确定为什么一张比另一张宽。

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row-fluid" style="margin-top:3%;">
        <div class="card" style="border:solid;border-color:black;">
          <div class="d-flex flex-row" >
            <div class="p-8 flex-grow-1" style="border:solid;border-color:green;">
              <h3>Card Title</h3>
              This text should expand to 75% of the parent container. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            </div>
            <div class="p-4 flex-grow-2" style="border:solid;border-color:red;">
              This should be 25%
              <img class="card-img-right flex-auto d-lg-block nopadding" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
            </div>
          </div>
        </div>
      </div>

      <div class="row" >
        <div class="card flex-md-row mb-4 box-shadow h-md-250" style="border:solid;border-color:black;">
          <div class="col-lg-8" style="border:solid;border-color:green;">
            <div class="card-body d-flex flex-column align-items-start">
              <div class="card-text mb-auto">
                <h3>Card Title</h3>
                This text should expand to 75% of the parent container. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
                Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
              </div>
            </div>
          </div>
          <div class="col-md-4" style="border:solid;border-color:red;">
            This should be 25% with no padding
            <img class="card-img-right flex-auto d-lg-block nopadding" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
          </div>
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

查看了许多解决方案，但我不确定它们是否适用，因为它们更老而且 4.1 是如此新。

更新 1

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row-fluid no-gutter">
        <div class="card" style="border:solid;border-color:black;">
          <div class="col-8" style="border:solid;border-color:green;">
            <h3>Card Title</h3>
            This text should expand to 75% of the parent container. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
            Extra text. Extra text. Extra text. Extra text. Extra text. Extra text. Extra text.
          </div>
          <div class="col-4" style="border:solid;border-color:red;">
            This should be 25% with no padding
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" style="width:70%;">
          </div>
        </div>
      </div>

      <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
             data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

更新 2

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="row no-gutters">
          <div class="col-sm-8 d-flex  order-1 order-sm-0">
            <div class="card-body d-flex flex-column align-items-start pr-md-3">
              <h3>
                <a href="#">Some title</a>
              </h3>
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
              <a href="#">Continue reading</a>
            </div>
          </div>
          <div class="col-sm-4">
            <img class="d-block img-w-100" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                 data-holder-rendered="true">
          </div>
        </div>
      </div>

      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="row no-gutters">
          <div class="col-sm-8 d-flex  order-1 order-sm-0">
            <div class="card-body d-flex flex-column align-items-start pr-md-3">
              <h3>
                <a href="#">Some title</a>
              </h3>
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
              <a href="#">Continue reading</a>
            </div>
          </div>
          <div class="col-sm-4">
            <img class="d-block img-w-100" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
                 data-holder-rendered="true">
          </div>
        </div>
      </div>

      <div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"
             data-holder-rendered="true" style="width: 400px; height: 400px;">
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

（屏幕截图为 25% 浏览器缩放）

更新 3

当前的建议看起来几乎不错，但是当图像更改时，它不符合设置的宽度。还是我使用 data-src 和 src 不正确？

【问题讨论】：

你改变了你的问题，我的部分答案现在不再相关！这里给出的答案可能不仅仅是对 OP 有帮助的问题。更改问题主体是自私的，不尊重回答者或有相同问题的未来。
我不明白我是如何改变我的问题的。我只根据您的建议更新了代码和屏幕截图，主要是剪切和粘贴。问题还是一样。我可以澄清任何不清楚的地方。非常感谢您的帮助，并想给您答案。
通过使用答案中的代码更新您的代码，您正在更改问题并提出与初始问题不同的问题。你不应该在这里这样做。您正在拒绝未来的访问者您已经获得的帮助。
好的。我不确定是否应该更新问题或继续让它变得越来越长。带来不便敬请谅解。我该如何解决？如果你替换你的答案，我可以放回问题历史记录。
如果太长，请使用“隐藏 sn-p”复选框以允许扩展 sn-ps。大多数人在编辑前加上“Edit:”，以便每个人都能轻松理解最初的问题以及附加请求/说明是什么。此外，如果您需要，请使用多个 sn-p。

标签： html css bootstrap-4

【解决方案1】：

注意p-* 类与col-* 类不同。这里的“p”代表“padding”，p-4 不能代替 col-4。

如果您想要 75/25 的比率，请在父级上使用 row no-gutters，在直系子级上使用 col-8 和 col-4。如果图像的原始宽度小于列宽，则不填充列是正常的。让它填满列，给它

display:block;  /* or d-block class */
width: 100%;    /* or w-100 class */
height: auto;   /* or h-auto class */

现在列将保持比例，您可以从这里开始使用边距或填充类。

请注意col-* 应该是.row 或.row-fluid 的直子。排水沟系统智能且响应迅速，但依赖于此标记。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
    <div class="row w-100 no-gutters">
      <div class="col-sm-8 d-flex order-1 order-sm-0">
        <div class="card-body d-flex flex-column align-items-start pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in.</p>
          <a href="#">Continue reading</a>
        </div>
      </div>
      <div class="col-sm-4">
        <img class="d-block w-100 h-auto" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true">
      </div>
    </div>
  </div>

</div>

如果你想使用 flexbox，允许文本在可用空间中增长 - 宽度减去图像，这是最初创建 flexbox 的目的，使用这个例子： p>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
  <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
    <h3>
      <a href="#">Some title</a>
    </h3>
    <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Continue reading</a>
  </div>
  <img class="d-none d-md-flex" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
    data-holder-rendered="true" style="width: 200px; height: 200px;">
</div>

m{*}-*-* 类设置margin、p{*}-*-* 设置padding、h-*-* 设置height 和d-*-* 设置display。

要将两张卡片放在同一行，请将它们放在 row/col 结构中：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-block" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card flex-md-row box-shadow h-md-250 mx-3 mt-3">
        <div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
          <h3>
            <a href="#">Some title</a>
          </h3>
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#">Continue reading</a>
        </div>
        <img class="d-none d-md-block" data-src="holder.js/200x200" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1648332c5cf%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1648332c5cf%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2273.640625%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
          data-holder-rendered="true" style="width: 200px; height: 200px;">
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢！请参阅问题中的新屏幕截图。 flexbox 版本看起来不错，但我很惊讶我把更简单的 col 版本搞砸了。我知道您说 col div 必须是直系后代，但我尝试将卡片 div 放在行上方，但这没有帮助（在卡片内放置一行也没有意义）。如果您能看出问题所在，希望使用 col 版本，因为这可能会在未来给我带来更少的问题（除非您认为不同）。
@user，你说“我希望能够根据图像的大小调整这个比例”。这就是 flexbox 布局的作用。无论如何，我添加了一个固定比例的布局，作为一个例子。此外，我添加了一些 CSS 以使图像更改大小以适应列的整个宽度，并且在换行时将图像放置在顶部。
我确实尝试将 css 添加到 .img-w-100 { width: 100; 下的本地文件中但这没有用。还尝试添加 display:block 和 height:auto，但得到了相同的结果。 w-100 类虽然有效，但我猜那是引导程序内置类。谢谢你的帮助。我会将其标记为已回答。
如果这种情况是特异性问题。 w-100 将 width: 100% !important 放在元素上。