Html Bootstrap 3 水平和垂直分隔线

Question

提问by user3233755

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:

我想实现如下图所示的纵横交错的分隔线：

enter image description here

在此处输入图片说明

Here's what my code looks like:

这是我的代码的样子：

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

Answer 1

回答by ElliotSchmelliot

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:

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

HTML:

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:

CSS：

.box-content {
    display: inline-block;
    width: 200px;
    padding: 10px;
}

.bottom {
    border-bottom: 1px solid #ccc;
}

.right {
    border-right: 1px solid #ccc;
}

Here is the working Fiddle.

这是工作中的 Fiddle。

UPDATE

更新

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.

如果您必须使用 Bootstrap，这里有一个半响应式示例，可以实现相同的效果，但您可能需要编写一些额外的媒体查询。

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:

CSS：

.row:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.col-xs-3:not(:last-child) {
    border-right: 1px solid #ccc;
}

Here is another working Fiddle.

这是另一个工作 Fiddle。

Note:

笔记：

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

请注意，<hr>如果您愿意，您也可以使用该元素在 Bootstrap 中插入水平分隔线。

Answer 2

回答by neophyte

The <hr>should be placed inside a <div>for proper functioning.

本<hr>应放在内部的<div>正常运作。

Place it like this to get desired width `

像这样放置以获得所需的宽度`

<div class='row'>
        <div class='col-lg-8 col-lg-offset-2'>
        <hr>
       </div>
       </div>

`

Hope this helps a future reader!

希望这对未来的读者有所帮助！

Answer 3

回答by netAction

Add the right lines this way and and the horizontal borders using HR or border-bottomor .col-right-line:after. Don't forget media queries to get rid of the lines on small devices.

以这种方式添加正确的线条，并使用 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;
}

Answer 4

回答by s-gc

I know this is an "older" post. This question and the provided answers helped me get ideas for my own problem. I think this solution addresses the OP question (intersecting borders with 4 and 2 columns depending on display)

我知道这是一个“较旧”的帖子。这个问题和提供的答案帮助我获得了解决自己问题的想法。我认为这个解决方案解决了 OP 问题（根据显示将边框与 4 列和 2 列相交）

Fiddle:https://jsfiddle.net/tqmfpwhv/1/

小提琴：https : //jsfiddle.net/tqmfpwhv/1/

cssbased on OP information, media query at end is for med & lg view.

css基于 OP 信息，最后的媒体查询用于 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;
    }
    }

htmladjustments to OP provided code. Red border and Img links for example.

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

Answer 5

回答by robertmoggach

I made the following little scss mixin to build for all the bootstrap breakpoints...

我制作了以下小 scss mixin 来构建所有引导程序断点...

With it I get .col-xs-divider-leftor col-lg-divider-rightetc.

有了它，我得到.col-xs-divider-left或col-lg-divider-right等。

Note:this uses v4-alpha bootstrap syntax...

注意：这使用 v4-alpha 引导程序语法...

@import 'variables';

$divider-height: 100%;

@mixin make-column-dividers($breakpoints: $grid-breakpoints) {
    // Common properties for all breakpoints
    %col-divider {
        position: absolute;
        content: " ";
        top: (100% - $divider-height)/2;
        height: $divider-height;
        width: $hr-border-width;
        background-color: $hr-border-color;
    }
    @each $breakpoint in map-keys($breakpoints) {
        .col-#{$breakpoint}-divider-right:before {
            @include media-breakpoint-up($breakpoint) {
                @extend %col-divider;
                right: 0;
            }
        }
        .col-#{$breakpoint}-divider-left:before {
            @include media-breakpoint-up($breakpoint) {
                @extend %col-divider;
                left: 0;
            }
        }
    }
}

Answer 6

回答by Wolverine

CSS

.vr {
   border-right: 1px solid #ccc !important;
}

HTML

<div class="row">
   <div class="col-md-6 vr">
       <p>Column 1</p>
   </div>
   <div class="col-md-6">
       <p>Column 2</p>
   </div>
</div

Now, we can use class vrwherever we need to have a vertical-dividerkind of appearance.

现在，我们可以vr在任何需要垂直分隔线外观的地方使用 class 。

Hope it helps!

希望能帮助到你！

Answer 7

回答by ashad

You can achieve this by adding border class of bootstrap

您可以通过添加 bootstrap 的边框类来实现此目的

like for border left ,you can use border-left

像左边框一样，你可以使用边框左

working code

工作代码

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3 text-center leftspan border-right border-bottom" 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 border-right border-bottom" 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 border-right border-bottom" 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  border-bottom" 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 border-right" 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 border-right" 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 border-right"  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>

for more refrence al bootstrap classes all classes ,search for border

有关更多参考 al bootstrap classes 所有类，请搜索边框

Html Bootstrap 3 水平和垂直分隔线

提问by user3233755

回答by ElliotSchmelliot

UPDATE

更新

回答by neophyte

回答by netAction

回答by s-gc

回答by robertmoggach

回答by Wolverine

回答by ashad

相关推荐

最近更新

标签

Html Bootstrap 3 水平和垂直分隔线

提问by user3233755

回答by ElliotSchmelliot

UPDATE

更新

回答by neophyte

回答by netAction

回答by s-gc

回答by robertmoggach

回答by Wolverine

回答by ashad

相关推荐

Html 在每页 CSS 的顶部插入横幅图像

Html 在 CSS 中将图像设置为页脚背景

Html 在另一个 div 中居中多个 div？

Html MVC Razor 使用 FormCollection 从选择中获取选项值

相关推荐

最近更新

标签