​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap3 实现水平列表 - 迹忆客(jiyik.com)</title>
6
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9
    <style>
10
    .list-group-horizontal .list-group-item {
11
        display: inline-block;
12
    }
13
    .list-group-horizontal .list-group-item {
14
        margin-bottom: 0;
15
        margin-left:-4px;
16
        margin-right: 0;
17
    }
18
    .list-group-horizontal .list-group-item:first-child {
19
        border-top-right-radius:0;
20
        border-bottom-left-radius:4px;
21
    }
22
    .list-group-horizontal .list-group-item:last-child {
23
        border-top-right-radius:4px;
24
        border-bottom-left-radius:0;
25
    }
26
    </style>
27
</head>
28
<body>
29
​
30
<div class="container">
31
    <div class="row" style="padding-top:50px">
32
33
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">
34
​
35
            <div class="list-group list-group-horizontal">
36
                <a href="#" class="list-group-item active">Google</a>
37
                <a href="#" class="list-group-item">Jiyik</a>
38
                <a href="#" class="list-group-item">Taobao</a>
39
                <a href="#" class="list-group-item">Github</a>
40
            </div>
41
​
42
        </div>
43
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">
44
​
45
            <div class="list-group list-group-horizontal">
46
                <a href="#" class="list-group-item">Google</a>
47
                <a href="#" class="list-group-item active">Jiyik</a>
48
                <a href="#" class="list-group-item">Taobao</a>
49
                <a href="#" class="list-group-item">Github</a>
50
            </div>
51
​
52
        </div>
53
​
54
    </div>
55
</div>
56
​
57
</body>
58
</html>

Design By 迹忆客 © 2023 jiyik.com ALL RIGHT RESERVED 冀ICP备15007416号-2