Bootstrap分频器和选择

时间：2017-03-12 11:24:30

标签： html css twitter-bootstrap

我希望我的代码看起来像下面给出的图像，但我无法解决它。我使用了bootstrap。 1）当我悬停时，我想要一个全长的白色框看起来像图像中给出的但只有固定的宽度和高度灰色出现 2）线的高度不超过，我希望第一条垂直线与第二条线合并

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}
.row.vdivide1 [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:5;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}
.row.vdivide2 [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}

hr{
    width: 80%;
    margin-left: 2%;
}
#one:hover{
    background-color: #eee;
}
<html>
<head><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/></head>
<body>
<div class="container sf-category">
      <div class="row vdivide">
      <div class="col-sm-2 text-center"><h4 id="one">Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide1">
      <div class="col-sm-2 text-center"><h4 id="one">Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide2">
      <div class="col-sm-2 text-center"><h4 id="one">Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide3">
      <div class="col-sm-2 text-center"><h4 id="one">Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide4">
      <div class="col-sm-2 text-center"><h4 id="one">Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    </div>
</body>
</html>

图片：enter image description here

编辑图像：enter image description here

2 个答案:

答案 0 :(得分：2)

一种全新的方法（类似于给出的图片）：

HTML：

<div class="main">
<p>
BROWSE JOBS BY ROLE
</p>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 01
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 02
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 03
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 04
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 05
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 06
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 07
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 08
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 09
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 10
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 11
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 12
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 13
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 14
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 15
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 16
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 17
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 18
    </span>
  </div>

</div>
</div>

CSS：

.main {
  background: #35b084;
  text-align: center;
  padding:10px;
}

.col-sm-2 {
  border-right: 1px solid #78ccae;
}
.col-sm-2:last-child{
  border-right: none;
}
hr{
  padding:0;
  margin:0;
  border-color:#78ccae;
}
.container{
  margin:10px 0px;
}
.col-sm-2:hover{
  background:white;
  color:#35b084;
}

在这里小提琴：https://jsfiddle.net/3w8anLsL/

希望这是你想要的！

编辑：

要获得5行（如图所示），请使用以下代码：

HTML：

<div class="main">
<p>
BROWSE JOBS BY ROLE
</p>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 01
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 02
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 03
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 04
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 05
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 06
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 07
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 08
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 09
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 10
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 11
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 12
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 13
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 14
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 15
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 16
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 17
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 18
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 19
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 20
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 21
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 22
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 23
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 24
    </span>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-sm-2">
    <span class="container">
      test 25
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 26
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 27
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 28
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 29
    </span>
  </div>
  <div class="col-sm-2">
    <span class="container">
      test 30
    </span>
  </div>
</div>
</div>

这里更新的小提琴：https://jsfiddle.net/3w8anLsL/1/

另一个使用fontawesome图标的小提琴：https://jsfiddle.net/3w8anLsL/2/

另一个编辑是将名为“container”的所有类替换为另一个名称（因为类容器是常规引导类）。在这里小提琴：https://jsfiddle.net/3w8anLsL/3/

答案 1 :(得分：1)

使用id="one"到列，display:flex到行类。

工作示例 

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}
.row.vdivide1 [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:5;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}
.row.vdivide2 [class*='col-']:not(:last-child):after {
  background: #d9534f;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 100%;
 
}

hr{
    width: 80%;
    margin-left: 2%;
}
#one:hover{
    background-color: #eee;
}
.row-eq-height {
  display: flex;
}
<html>
<head><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/></head>
<body>
       <div class="container sf-category">
      <div class="row vdivide row-eq-height">
      <div class="col-sm-2 text-center"  id="one"><h4>Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide1 row-eq-height">
      <div class="col-sm-2 text-center" id="two"><h4>Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide2 row-eq-height">
      <div class="col-sm-2 text-center" id="three"><h4>Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide3 row-eq-height">
      <div class="col-sm-2 text-center" id="four"><h4 >Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    <hr style="background-color: #d9534f">
      <div class="row vdivide4 row-eq-height">
      <div class="col-sm-2 text-center" id="five"><h4>Software Developer</h4></div>
      <div class="col-sm-2 text-center"><h1>2</h1></div>
      <div class="col-sm-2 text-center"><h1>3</h1></div>
      <div class="col-sm-2 text-center"><h1>4</h1></div>
      <div class="col-sm-2 text-center"><h1>5</h1></div>
      </div>
    </div>
  </body>
</html>

相关问题
最新问题