Question

我想在某些图像的左侧放置2个链接，在右侧放置1个链接。
图片的大小各不相同，我的主要div中的所有内容都居中。

main .about p {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 700px;
  line-height: 1.5;
  font-weight: 400;
  z-index: 9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<main class="section mb-5">
  <!-- Main -->

  <section class="container mb-4">
    <div class="row">
      <div class="col-md-12 ml-md-auto text-center about">
        <header>
          <h1 class="mb-3">Some Title</h1>
        </header>

        <img src="image.jpg" height="484" width="700">
        <p class="text-left">
          <a href="#">FHD Ansicht</a> |
          <a href="#">4K Ansicht</a>
        </p>

      </div>
    </div>
  </section>

</main>

此刻，我确实将图片下方的段落设置为图片的宽度：它看起来像这样，只在左侧显示文本：

我需要的是：

我想图像周围的图形和其中的文本是解决方案的一部分。在最新的引导程序中最好的方法是什么？

Answer 1

尝试使用此代码段：

<main class="container-fluid">
    <div class="row">
        <img class="col-md-12" src="#" alt="test" style="background-color: blue; height: 400px;">            
    </div>
    <div class="row subtitle-container">
        <div class="col-md-10 left-subtitle">
            Some Text | Some Text
        </div>
        <div class="col-md-2 right-subtitle">
            Some Text
        </div>
    </div>
</main>

Answer 2

您可以使用float-left和float-right引导类来左右移动文本。

main .about p {
  margin-left: 50%;
  transform: translateX(-50%);
  width: 700px;
  line-height: 1.5;
  font-weight: 400;
  z-index: 9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<main class="section mb-5">
  <!-- Main -->

  <section class="container mb-4">
    <div class="row">
      <div class="col-md-12 ml-md-auto text-center about">
        <header>
          <h1 class="mb-3">Some Title</h1>
        </header>

        <img src="image.jpg" class="w-100" height="484" width="700">
        <div class="text-center clearfix">
          <a href="#" class="float-left">FHD Ansicht</a>
          <span class="float-left mx-2">|</span>
          <a href="#" class="float-left">4K Ansicht</a>
          <!-- <span>|</span> -->
          <a href="#" class="float-right text-danger">another link</a>
        </div>

      </div>
    </div>
  </section>

</main>

图像下方的左右文字是否在同一行上？

2 个答案: