图标题与图像边距对齐

时间：2018-06-10 00:25:23

标签： css twitter-bootstrap bootstrap-4 figure caption

在Bootstrap 4.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>

2 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

默认情况下，引导程序figure和figurecaption左对齐。这是因为您使用d-block和mx-auto它们现在不对齐。 mx-auto对齐中心的img。我认为最好的方法是删除这两个类。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

您的图片从Bootstrap框架获得margin-left: auto !important

所以为了防止它，你可以通过给图像和标题提供相同的边距来覆盖它，就像这样

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

然后可能会在其上放一些media queries。

我做了example here - jsfiddle

＆＃13;
＆＃13; 
/* --- 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;
} */
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题