html - 如何在 Bootstrap 的页面中心对齐文本和矩形(带有一些文本)？

Question

我正在用 HTML 和 CSS 制作一个网页，必须完全像这张图片一样复制。

此刻，我可以在 fiddle 中得到这个.

fiddle 的问题是:它(文本和一个矩形(带有一些文本))在页面的左侧和右侧中心对齐，而我想将它们放在页面的中心(两者之间有一定距离)，如图所示。我使用的 HTML 代码是:

<div class="sections">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 left-side"> <a href="">Development & Design</a></div>
            <div class="col-lg-6 right-side"> <a href="">Web Designer Qualifications Go here</a></div>
        </div>
    </div>

我想知道我是否需要 .col-lg-6 class 就像我在上面用来复制图像一样？如果不是，那么我是否需要在我的 HTML 代码中使用 col-lg-offset-1 来复制图像？

Answer 1

至少对于您正在执行的屏幕大小而言 col-lg你可以使用 justify-content-center 让它工作在包装中 <div> .这样做的目的是将空白空间移动到两个元素的两侧，将它们放在一起到中心。我用了col-lg-4就我而言，但如果这对您来说太小，您可以根据自己的需要进行调整。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="sections">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-3 left-side"> <a href="">Development & Design</a></div>
      <div class="col-lg-3 right-side">
        <a href="">Web Designer</a>
        <!-- list requested in the comments Here -->
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>
  </div>
</div>

您可以在 Bootstrap Doc 上找到更多信息