Question

我正在制作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才能复制图像？

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

上找到更多信息

Answer 2

在以下代码段中运行以下代码：

＆＃13;

.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%;
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: