如何在 Bootstrap 的页面中心对齐文本和矩形（带有一些文本）？答案

【问题标题】：How to align a text and a rectangle (with some text) at the center a page in Bootstrap?如何在 Bootstrap 的页面中心对齐文本和矩形（带有一些文本）？
【发布时间】：2017-08-27 03:32:10
【问题描述】：

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

此时，我可以在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 才能复制图像？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

至少对于您正在使用的屏幕大小col-lg，您可以通过在包装<div> 中使用justify-content-center 来使其工作。这样做是将空白空间移动到两个元素的两侧，将它们一起带到中心。在我的情况下，我使用了 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找到更多信息

【讨论】：

它确实有效，谢谢。我有一个问题，在引导网格系统中值的总和应该是 12，但在这种情况下它是 6 (col-lg-3 + col-lg-3) ？对吗？
是的，这不是问题，因为您将这两个元素包装在一行中。如果这解决了您的问题，请标记它:)
这只是意味着每行最多应该是 12 个。如果您在 row 中有 4 次 col-lg-3 ，它将位于同一行，但是如果您添加另一个 col-lg-3 ，则最后一个元素将被推到下一行。
如果您希望所有内容都在同一行中，那是正确的。
不，每个row 没有最少或最多 12 个。请read this和this

【解决方案2】：

在代码片段下面运行：

.sections{
    width: 100%;
}
.sections .row {
    padding-top: 100px;
}

.sections .left-side {
    font-style: italic;
    float:left;
    width:45%;
}

.sections .right-side {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    max-width: 320px !important;
    height: 100px;
    font-style: italic;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 10px;
    float: right;
    width:50%;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Homesail</title>
    <link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test.css">
</head>




<body>


    <div class="sections">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 left-side"> <a href="">Development &amp; Design</a></div>
                <div class="col-lg-6 right-side"> <a href="">Web Designer</a>
                <ul>
                  <a href=''><li>Qualification</li></a>
                  <a href=''><li>Go here</li></a>
                </ul></div>
            </div>
        </div>
    </div>
</body>

</html>

【讨论】：