个人中心
gpt4 book ai didi

html - Bootstrap 4.1 列内的额外填充

转载 作者：太空宇宙 更新时间：2023-11-04 07:09:59 25 4
gpt4 key购买 nike

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

目标:在中心列中对齐大小相同的水平卡片，每张卡片大约有 75% 的卡片文本和 25% 的图片。我希望能够根据我想要的图像大小或图像 div 的大小来调整此比例。因此，如果我增加图像大小/最大宽度，它将增加图像列/flex 行/其他，或者增加图像 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>

enter image description here

查看了许多解决方案，但我不确定它们是否适用，因为它们要老得多而且 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>

enter image description here

更新 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%)

enter image description here

更新 3

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

最佳答案

备注p-*类与 col-* 不相似类。 “p”在这里代表“填充”和p-4无法替换 col-4 .

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

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{*}-*-*类(class)集 margin , p{*}-*-*设置 padding , h-*-*设置 height和 d-*-*设置 display .

要在同一行放置两张卡片，请将它们放在行/列结构中:

<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>

关于html - Bootstrap 4.1 列内的额外填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51259494/

25 4 0
文章推荐： python - 从字典列表中提取字符串
文章推荐： java - CodeNameOne 列表组件 ListItems 中的有效键是什么？
文章推荐： python - 派生类重载时调用基类方法
文章推荐： java - Lego Mindstorms ev3 leJOS 在编译期间查找库
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com