Question

我希望有人可以帮助解决我过去2天遇到的问题。不幸的是，由于我是新手，我无法在此发布图片，并且没有声誉点。

我有两个部分的布局。

第一部分
第一行：标题（居中）
第二行：横跨页面宽度展开的6个图标，以及每个相应图标下方的相关1-2字描述。

第二部分
第一行：2个标题（一个在左侧居中，另一个在右侧居中;在页面中间用白色垂直线分开）
第二行：按照第一部分在页面宽度上展开6个图标;但是这一次，前3个图标属于第一个标题，最后3个图标属于第二个标题....中间有一条垂直线，用于分隔第一个标题＆amp;左侧有3个图标，第2个标题为＆amp;最后3个图标在右边。

我可以在CSS中获得第一行（标题，6个图标及其相关的1-2个单词描述）。我在Twitter-Bootstrap中使用了容器流体，行和必要的col-sm-2类。

但是如何插入右边100％的白线（或任何其他建议将非常受欢迎），并将其挤压在第2行的两个标题之间并将图标分成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 -->

我需要下一部分有点像第1部分，但在部分中间有一条垂直的白线，将第二个标题和3个图标分隔到左边，第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，它没有用。我也试过给一个班级，然后使用＆＃34; margin：0 auto＆＃34;在CSS中，它也没有用。

我哪里出错？

提前致谢。

Answer 1

首先，您应该将.section2视为行，其中有两个孩子 header1 和 header2 。所以将class="row"添加到此div，并将class="col-xs-12 col-sm-6"应用于每个标题栏。

然后将每个标题块视为单个行，包含3个带描述的图像。做与以前相同的行动。

不再需要

.container-fluid和.left .right，因为家长.row和孩子的.col-*会为您处理这些问题。

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

例如，请参阅此fiddle。

Answer 2

在第二部分中创建两个主要行，这些行包含标题和相应图标的嵌套行。在第一行添加border-right。

使用Bootstrap，在中间插入一条垂直线，将左边的3个图标和右边的3个图标分开，并使其保持响应

2 个答案: