Bootstrap 3水平和垂直分隔线
use*_*755 36 html css twitter-bootstrap-3
我无法在我的网站上放置水平和垂直线条.不知道这有什么问题.
我尝试使用边框,但我不确定我是否做得对.
我想像下面的图像一样实现十字交叉分隔:
这是我的代码的样子:
<div class="container-liquid" style="margin:0px; padding: 0px">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="one"><h5>Rich Media Ad Production</h5><img src="images/richmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="two"><h5>Web Design & Development</h5> <img src="images/web.png" ></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="three"><h5>Mobile Apps Development</h5> <img src="images/mobile.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="four"><h5>Creative Design</h5> <img src="images/mobile.png"> </div>
<div class="col-xs-12"><hr></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="five"><h5>Web Analytics</h5> <img src="images/analytics.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="six"><h5>Search Engine Marketing</h5> <img src="images/searchengine.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan" id="seven"><h5>Mobile Apps Development</h5> <img src="images/socialmedia.png"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center rightspan" id="eight"><h5>Quality Assurance</h5> <img src="images/qa.png"></div>
<hr>
</div>
</div>
Ell*_*iot 37
你必须使用Bootstrap吗？这是一个基本的HTML/CSS示例,用于获取不使用任何Bootstrap的外观:
HTML:
<div class="bottom">
<div class="box-content right">Rich Media Ad Production</div>
<div class="box-content right">Web Design & Development</div>
<div class="box-content right">Mobile Apps Development</div>
<div class="box-content">Creative Design</div>
</div>
<div>
<div class="box-content right">Web Analytics</div>
<div class="box-content right">Search Engine Marketing</div>
<div class="box-content right">Social Media</div>
<div class="box-content">Quality Assurance</div>
</div>
CSS:
.box-content {
display: inline-block;
width: 200px;
padding: 10px;
}
.bottom {
border-bottom: 1px solid #ccc;
}
.right {
border-right: 1px solid #ccc;
}
这是工作小提琴.
UPDATE
如果您必须使用Bootstrap,这里是一个半响应示例,可以实现相同的效果,但您可能需要编写一些额外的媒体查询.
HTML:
<div class="row">
<div class="col-xs-3">Rich Media Ad Production</div>
<div class="col-xs-3">Web Design & Development</div>
<div class="col-xs-3">Mobile Apps Development</div>
<div class="col-xs-3">Creative Design</div>
</div>
<div class="row">
<div class="col-xs-3">Web Analytics</div>
<div class="col-xs-3">Search Engine Marketing</div>
<div class="col-xs-3">Social Media</div>
<div class="col-xs-3">Quality Assurance</div>
</div>
CSS:
.row:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.col-xs-3:not(:last-child) {
border-right: 1px solid #ccc;
}
这是另一个工作小提琴.
注意:
请注意,<hr>如果您愿意,也可以使用该元素在Bootstrap中插入水平分隔符.
- 在Bootstrap 3中使用类似col-xs-6`的类可以提供流畅/负责任的布局,适应设备的实际屏幕尺寸.这在Bootstrap 3(以及所有其他实现类似逻辑的程序)中非常简洁.您的"简单"代码虽然有效但似乎没有此功能. (3认同)
neo*_*yte 13
本<hr>应放在内部的<div>正常运作.
像这样放置以获得所需的宽度`
<div class='row'>
<div class='col-lg-8 col-lg-offset-2'>
<hr>
</div>
</div>
`
希望这有助于未来的读者!
- 谢谢，垂直线呢？ (2认同)
以这种方式添加正确的线条,使用HR或border-bottom或.col-right-line:after后面添加水平边框.不要忘记媒体查询以摆脱小型设备上的线路.
.col-right-line:before {
position: absolute;
content: " ";
top: 0;
right: 0;
height: 100%;
width: 1px;
background-color: @color-neutral;
}
小智 7
我知道这是一个"老"的帖子.这个问题和提供的答案帮助我了解了我自己的问题.我认为这个解决方案解决了OP问题(根据显示,交叉边界有4列和2列)
小提琴: https ://jsfiddle.net/tqmfpwhv/1/
基于OP信息的css,最后的媒体查询是用于med&lg视图.
.vr-all {
padding:0px;
border-right:1px solid #CC0000;
}
.vr-xs {
padding:0px;
}
.vr-md {
padding:0px;
}
.hrspacing { padding:0px; }
.hrcolor {
border-color: #CC0000;
border-style: solid;
border-bottom: 1px;
margin:0px;
padding:0px;
}
/* for medium and up */
@media(min-width:992px){
.vr-xs {
border-right:1px solid #CC0000;
}
}
对OP提供代码的html调整.例如,红色边框和Img链接.
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="one">
<h5>Rich Media Ad Production</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" />
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="two">
<h5>Web Design & Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="three">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="four">
<h5>Creative Design</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for for all viewports -->
<div class="col-xs-12 hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="five">
<h5>Web Analytics</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-xs" id="six">
<h5>Search Engine Marketing</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<!-- hr for only x-small/small viewports -->
<div class="col-xs-12 col-sm-12 hidden-md hidden-lg hrspacing"><hr class="hrcolor"></div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-all" id="seven">
<h5>Mobile Apps Development</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
<div class="col-xs-6 col-sm-6 col-md-3 text-center vr-md" id="eight">
<h5>Quality Assurance</h5>
<img src="http://png-1.findicons.com/files/icons/2338/reflection/128/mobile_phone.png" >
</div>
</div>
</div>