html - Bootstrap 4.1 列内的额外填充-6ren

html - Bootstrap 4.1 列内的额外填充

转载作者：太空宇宙更新时间：2023-11-04 07:09:59

转换到 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>

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

最佳答案

备注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/

文章推荐： python - 从字典列表中提取字符串

文章推荐： java - CodeNameOne 列表组件 ListItems 中的有效键是什么？

文章推荐： python - 派生类重载时调用基类方法

文章推荐： java - Lego Mindstorms ev3 leJOS 在编译期间查找库

dart - 额外/重定向默认路由时
我配置了我的RouteInitializer如下: class AppRouteInitializer implements RouteInitializer { init(Router rout
Android PendingIntent 额外
我正在尝试从 Android 应用程序发送短信。我正在使用 PendingIntent 以便我可以使用 Broadcast Receiver 检查它是否发送正常。由于 sendTextMessage
mongoDB使用投影剔除‘额外’字段的操作过程
目录简介 1 "额外"字段是什么 1.1 "额外"是指与业务无关 1.2 产生
java - android发送 Intent 额外
应用程序读取 JSON 数据。然后它会将其放入 ListView (正确)，但在按下某个项目后，我总是会得到显示的相同值。下面的代码我认为是问题所在，但我找不到。 try{ JSONArray
android - 覆盖 Intent 额外
我正在使用以下代码 (Kotlin) 创建通知 val builder = NotificationCompat.Builder(ctx) ........ .set
Java JPanel 自己稍微移动 + 额外
我有一个问题。现在我正在使用 3 个面板，mainPanel 和其他 2 个面板(btnPanel 和 iconPanel)。所以问题是当我按下“重置”按钮时，我删除了 iconPanel 并再次添加
css - 跨度，额外 margin
这是我的 html: Settings Export Import 和CSS: span.button { float:right; margin-righ
mongodb - Golang Mongodb %!(额外
我正在尝试将一个结构编码为 JSON，然后将其插入我的 Mongo 数据库，但不断出现此错误:%!(EXTRA main.Test={575590180 Me})。我究竟做错了什么？我完全从我从事的另
latex - !额外}，或者忘记\endgroup。 latex
嘿，我遇到了这些 latex 格式问题，有人可以提供一些帮助吗？ .tex 文件: \begin{table}{} \renewcommand{\arraystretch}{1.1} \c
java - fragment 作为可序列化 bundle 额外
我在 FragmentPagerAdapter 中使用了 Fragment 的 ArrayList。我想在 saveState() 中保存此 ArrayList 的状态，并在 restoreStat
Swift MapKit - 向注释添加(额外)属性？
我做了this MapKit-教程一切正常，但如何为我的 pin 添加额外的属性？这是我的课车: import Foundation import MapKit class Car: NSObje
android - Android 额外 Intent 的文档
关于 Android intent 将提供的附加功能有哪些文档？更新: 我做了一些进一步的调查。我知道我们可以假设每个 Intent 都不会解析任何数据或额外内容，除非有明确记录。此外，一些(但不是
python - SqlAlchemy TIMESTAMP 'on update' 额外
我在 python3.4.3 上使用 SqlAlchemy 来管理 MySQL 数据库。我正在创建一个表: from datetime import datetime from sqlalchemy
html - Bootstrap 1 额外 px in chrome
我正在使用 bootstrap 创建网页。我在两个 block (内容和标题)上派生了正文。在内容 block 中，我有 div 类 .container .sameTable 在里面我有 div 类
mingw - 构建无需 MinGW 和 MSYS 额外 dll 即可运行的程序
我在Windows 7上的MinGW和MSYS下使用gfortran构建了一些fortran程序。但是当我在未安装MinGW和MSYS的其他计算机上运行它们时，系统总是要求一些dll，例如libgfo
javascript - 使用 jQuery 将多个元素彼此相邻放置后，第一个元素的(额外)填充/边距是多少
第一个元素的右侧似乎有额外的间距，我不知道它是从哪里来的。有人可以帮助我吗？这是我使用的代码: http://jsfiddle.net/srabeat/tenx4y1c/1/ for (i = 0;
javascript - fs-额外 : Error: EPERM: operation not permitted, 取消链接
我使用 fs-extra 收到以下错误: ERROR { [Error: EPERM: operation not permitted, unlink 'C:\Projects\xxx\branche
c++ - AES-128 CBC 模式下加密流末尾的 Crypto++ 额外 block
我正在尝试在 CBC 模式下使用 AES-128 加密 320 字节的二进制数据，并将密码存储到一个文件中。输出文件应该是 320 字节，但我得到了 336 字节。这是我的代码: #include
java - 使用带有 Android 额外 header 的 URL 打开浏览器
我有一个特定的要求，我必须从我的 Activity 中触发浏览器上的 url。我可以使用以下代码执行此操作: Intent browserIntent = new Intent( Intent.A
php - JMS DI 额外 bundle : How do I inject a dependency only if it exists
我正在使用 JMS DI 注入(inject)带有注解的服务: use JMS\DiExtraBundle\Annotation as DI; /** * @DI\Service("foo.bar.

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 4.1 列内的额外填充