Question

过渡到引导程序4.1后遇到一些麻烦。我有水平卡可以在4.0-alpha中正常工作，但是现在还不行。下面的屏幕快照显示了两次尝试将水平卡片与大约75％的卡片文本和25％的右侧图像缩略图对齐的尝试。第一次尝试是两列裸露的骨头，第二次尝试来自示例here（请参阅卡的一半）。我倾向于简化维护，但是第二个示例显然看起来更好（如果删除边框颜色），但是在任何一种情况下，我都会在图像周围添加额外的填充，并且75:25的比例取决于图像的大小是不稳定的。如果可能的话，我想提供最快速响应的解决方案和可维护的解决方案（我知道...吃乞be的蛋糕）。

目标：将大小相等的水平卡片对齐在中心一栏中，每张卡片的文字文本大约占75％，图像的图片占25％。我希望能够根据所需图像的大小或div图像的大小来调整此比率。因此，如果我增加图像大小/最大宽度，它将增加图像列/伸缩行/其他内容，或者增加图像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？

Answer 1

注意p-*类与col-*类不同。 “ p ”在这里代表“ 填充”，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首先为其创建的内容，请使用以下示例：

<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-*-*集{{1} }。

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

display

栏内的Bootstrap 4.1额外填充

1 个答案: