html - 使用 Bootstrap，在中间插入一条垂直线，将左边的 3 个图标和右边的 3 个图标分开，仍然让它响应

Question

我希望有人能帮助解决我过去 2 天遇到的问题。不幸的是，由于我是新手，并且没有声望点，所以我不能在这里发布它的图像。

我有一个包含 2 个部分的布局。

第 1 部分
第一行:标题(居中)
第二行:6 个图标分布在整个页面的宽度上，每个图标下方都有 1-2 个相关的单词描述。

第二部分
第一行:2个标题(一个在左边居中，一个在右边居中；页面中间用白色竖线分隔)
第二行:按照第 1 部分，6 个图标分布在页面宽度上；但是这次，前 3 个图标属于第一个标题，最后 3 个图标属于第二个标题....中间有一条垂直线，用于分隔第一个标题和左侧的 3 个图标，并且第二个标题和右侧的最后 3 个图标。

我可以在 CSS 中使用第一行(标题、6 个图标及其相关的 1-2 个词描述)。我在 Twitter-Bootstrap 中使用了 container-fluid、row 和必要的 col-sm-2 类。

但我如何插入右边框 100% 白线(或任何其他建议将非常受欢迎)，并将其挤压在第二行的两个标题之间，同时将图标分成 3x3？

下面的代码是我在第 1 部分中使用的代码:

<div class="container-fluid">
    <h5 class="text-center">HEADER 1</h5>
    <ul class="row">
      <li class="col-xs-4 col-sm-2">
        <img src="img/1.png" alt="icon1">
        <p class="text-center">2-word description</p>
      </li>
      <li class="col-xs-4 col-sm-2">
        <img src="img/2.png" alt="icon2">
        <p class="text-center">2-word description</p>
      </li>
      <li class="col-xs-4 col-sm-2">
        <img src="img/3.png" alt="icon3">
        <p class="text-center">2-word description</p>
      </li>
      <li class="col-xs-4 col-sm-2">
        <img src="img/4.png" alt="icon4">
        <p class="text-center">2-word description</p>
      </li>
      <li class="col-xs-4 col-sm-2">
        <img src="img/5.png" alt="icon5">
        <p class="text-center">2-word description</p>
      </li>
      <li class="col-xs-4 col-sm-2">
        <img src="img/6.png" alt="icon6">
        <p class="text-center">2-word description</p>
      </li>
    </ul>
    <hr> 
  </div><!-- /.container-fluid -->

我需要下一部分有点像第一部分，但在该部分中间有一条垂直白线，将第二个标题和左侧的 3 个图标分开，第三个标题和最后 3 个图标分开权利。

下面的代码用于第二部分:

<div class="container-fluid">
    <ul class="row">
      <li class="col-xs-12 col-sm-6">
        <h5 class="text-center">HEADER 2</h5>
      </li>
      <li class="col-xs-12 col-sm-6">
        <h5 class="text-center">HEADER 3</h5>
      </li>
    </ul>
  </div><!-- /.container-fluid -->

  <div class="container-fluid section2">
    <div class="row">
      <div class="left col-xs-12 col-sm-6">
        <div class="container-fluid">
          <ul class="row">
            <li class="col-xs-4 col-sm-4">
              <img src="img/7.png" alt="icon7">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-4">
              <img src="img/8.png" alt="icon8">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-4">
              <img src="img/9.png" alt="icon9">
            <p class="text-center">2-word description</p>
            </li>
          </ul>
        </div><!-- /.container-fluid -->
      </div><!-- /.left -->
      <div class="right col-xs-12 col-sm-6">
        <div class="container-fluid">
          <ul class="row">
            <li class="col-xs-4 col-sm-4">
              <img src="img/10.png" alt="icon10">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-4">
              <img src="img/11.png" alt="icon11">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-4">
              <img src="img/12.png" alt="icon12">
            <p class="text-center">2-word description</p>
            </li>
          </ul>
        </div><!-- /.container-fluid -->
      </div><!-- /.right -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->

非常感谢您的宝贵帮助!

提前致谢!

第二部分的新代码

<div class="section2">
    <div class="left container-fluid">
      <div class="row">
      <h5 class="col-xs-12 col-sm-6 text-center">
        HEADER2
      </h5>
      </div>
      <ul class="row">
        <li class="col-xs-4 col-sm-2">
          <img src="img/7.png" alt="icon7">
          <p class="text-center"2-word description</p>
        </li>
        <li class="col-xs-4 col-sm-2">
          <img src="img/8.png" alt="icon8">
          <p class="text-center">2-word description</p>
        </li>
        <li class="col-xs-4 col-sm-2">
          <img src="img/9.png" alt="icon9">
          <p class="text-center">2-word description</p>
        </li>
      </ul>
    </div><!-- /.left .container-fluid -->

    <div class="right container-fluid">
      <div class="row">
      <h5 class="col-xs-12 col-sm-6 text-center">
        HEADER3
      </h5>
      </div>
      <ul class="row">
        <li class="col-xs-4 col-sm-2">
              <img src="img/10.png" alt="icon10">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-2">
              <img src="img/11.png" alt="icon11">
            <p class="text-center">2-word description</p>
            </li>
            <li class="col-xs-4 col-sm-2">
              <img src="img/12.png" alt="icon12">
            <p class="text-center">2-word description</p>
            </li>
      </ul>
    </div><!-- /.right .container-fluid -->
  </div><!-- /.section2 -->

新问题

嗨...我还有一个小问题... 我在大屏幕上工作，直到现在我才开始在@mediaqueries 上工作并调整屏幕大小，这对我来说并不明显。

图标和各自的 2 词描述并不完全彼此居中。两个词的描述略微位于上面图标的右侧。

我试过在元素上使用 Bootstrap 类 .text-center，但没有用。 我也试过给 a 类，然后在 CSS 中使用“margin: 0 auto”，但它也没有用。

我哪里做错了？

提前致谢。

Answer 1

首先你应该考虑.section2作为行，有两个 child header1 和 header2。所以添加 class="row"对此 div , 并申请 class="col-xs-12 col-sm-6"到每个标题 block 。

然后将每个标题 block 视为一个行，其中包含 3 张带描述的图像。做和以前一样的 Action 。

.container-fluid和 .left .right不再需要，作为 parent .row和 child .col-*为您处理这些。

更新:很抱歉忽略了中间空白的问题。这是由 <ul> 的默认样式引起的, 可以通过添加 ul { padding-left: 0;} 来解决.

看这个fiddle例如。