Bootstrap 3水平和垂直分频器 [英] Bootstrap 3 Horizontal and Vertical Divider

问题描述

我无法在我的网站上放置水平和垂直线条。不确定这有什么问题。

I am having trouble to put in horizontal and vertical lines on my website. Not sure what's wrong with this.

我尝试使用边框，但我不知道我是否正确。

I tried using borders but I am not sure if I am doing it right.

我想要实现一个十字交叉的分隔符，如下图所示：

I would like to achieve a criss-cross dividers just like the below image:

这里是我的代码：

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

推荐答案

你必须使用Bootstrap吗？下面是一个基本的HTML / CSS示例，用于获取这个不使用任何Bootstrap的外观：

Do you have to use Bootstrap for this? Here's a basic HTML/CSS example for obtaining this look that doesn't use any 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;
}

这是工作小提琴。

如果你必须使用Bootstrap，这里是一个半响应的例子，达到相同的效果，虽然你可能需要写几个额外的媒体查询。

If you must use Bootstrap, here is a semi-responsive example that achieves the same effect, although you may need to write a few additional media queries.

HTML ：

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中插入一个水平分隔符。

Note that you may also use the <hr> element to insert a horizontal divider in Bootstrap as well if you'd like.

这篇关于Bootstrap 3水平和垂直分频器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！