图标题与图像边距对齐

Question

在Bootstrap4.1中，是否可以将标题与图片边距对齐，如下图所示。

Alignment of figure caption with image

按照 getbootstrap.com 中的示例，标题和图像边距之间存在偏移量，该偏移量随视口大小而变化。我想要的是图形标题与图像边距左对齐，而不是图形 div.

下面列出了我使用的代码。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded mx-auto d-block" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div><!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit, ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div><!-- End col-md-6 -->

    </div> <!-- End row -->
  </div> <!-- End container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

您的图像从 Bootstrap 框架

获得 margin-left: auto !important

因此，为了防止出现这种情况，您可以通过为图像和标题提供相同的边距来覆盖它，就像这样

img.figure-img, figcaption.figure-caption  {
     margin-left: 0px !important;
}

然后放一些 media queries 就可以了。

我做了一个example here - jsfiddle

/* --- Give both image and caption same margin --- */

img.figure-img, figcaption.figure-caption  {
  margin-left: 0px !important;
}

/* --- Or just remove the auto width -- */
/* img.figure-img {
  margin-left: unset !important;
} */

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded mx-auto d-block" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div><!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit, ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div><!-- End col-md-6 -->

    </div> <!-- End row -->
  </div> <!-- End container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Answer 2

<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

https://getbootstrap.com/docs/4.1/content/figures/

默认情况下，bootstrap figure 和 figurecaption 左对齐。因为你用了d-block和mx-auto，所以现在没有对齐。 mx-auto 将 img 居中对齐。我认为最好的方法是删除那两个类。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <figure>
          <img class="figure-img img-fluid rounded" src="https://source.unsplash.com/random/400x400" alt="An unsplash image" />
          <figcaption class="figure-caption">
            <strong>Picture 1</strong> A random image from unsplash.com
          </figcaption>
        </figure>
      </div>
      <!-- End col-md-6 -->

      <div class="col-md-6">
        <h5>Lorem Ipsum</h5>
        <div class="text-justify">
          <p>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </p>
          <p>
            Nunc facilisis eu est a facilisis. Nullam lobortis porta elit, ut iaculis sapien bibendum et. Donec non accumsan turpis. Aliquam feugiat urna arcu, vel imperdiet metus egestas vitae. Vivamus eget tincidunt elit, aliquet condimentum mi. Aenean libero velit,
            ultricies ac nisi in, lobortis efficitur ligula. Vivamus quis tellus quis leo accumsan posuere. Sed sit amet dictum dolor. Duis ac volutpat ipsum, vitae porttitor felis. Proin egestas hendrerit elementum. Aenean finibus bibendum tellus, vel
            dictum justo consequat nec. Donec imperdiet sollicitudin risus sed suscipit. Donec ullamcorper, ante eget ultrices condimentum, urna arcu hendrerit metus, sed scelerisque ex orci et mauris. Nunc ut quam et tellus malesuada convallis. Aliquam
            sed lectus a dui tempor rutrum.
          </p>
        </div>
      </div>
      <!-- End col-md-6 -->

    </div>
    <!-- End row -->
  </div>
  <!-- End container -->

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

</html>

图标题与图像边距对齐

Figure caption aligned with image margin

css

twitter-bootstrap

bootstrap-4

figure

caption