个人中心
gpt4 book ai didi

html - Bootstrap 分隔符和选择

转载 作者：太空宇宙 更新时间：2023-11-04 15:59:25 25 4
gpt4 key购买 nike

我希望我的代码看起来像下面给出的图像，但我无法修复它。我使用了 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

最佳答案

一种全新的方法(类似于给定的图片):

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

在这里 fiddle :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>

此处更新的 fiddle :https://jsfiddle.net/3w8anLsL/1/

另一个 Fiddle 也使用 fontawesome 图标:https://jsfiddle.net/3w8anLsL/2/

另一个编辑是将所有名为“container”的类替换为另一个名称(因为类 container 是一个常规的 Bootstrap 类)。在这里 fiddle :https://jsfiddle.net/3w8anLsL/3/

关于html - Bootstrap 分隔符和选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42746808/

25 4 0
文章推荐： css - 显示与 block div 列表的第一个 div 内联的 div
文章推荐： javascript - fullcalendar 多月日历 View
文章推荐： c++ - Unicode - ICU 库 - 获取 UnicodeString 中的代码点计数
文章推荐： jquery - 需要视频为 3 个样式表工作 - 目前视频从较小的 div 中溢出
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com