案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例 - 组件对齐方式</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<nav class="navbar navbar-default" role="navigation">
13
    <div class="container-fluid">
14
    <div class="navbar-header">
15
        <a class="navbar-brand" href="#">W3xue教程</a>
16
    </div>
17
    <div>
18
        <!--向左对齐-->
19
        <ul class="nav navbar-nav navbar-left">
20
            <li class="dropdown">
21
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
22
                    Java
23
                    <b class="caret"></b>
24
                </a>
25
                <ul class="dropdown-menu">
26
                    <li><a href="#">jmeter</a></li>
27
                    <li><a href="#">EJB</a></li>
28
                    <li><a href="#">Jasper Report</a></li>
29
                    <li class="divider"></li>
30
                    <li><a href="#">分离的链接</a></li>
31
                    <li class="divider"></li>
32
                    <li><a href="#">另一个分离的链接</a></li>
33
                </ul>
34
            </li>
35
        </ul>
36
        <form class="navbar-form navbar-left" role="search">
37
            <button type="submit" class="btn btn-default">
38
                向左对齐-提交按钮
39
            </button>
40
        </form>
41
        <p class="navbar-text navbar-left">向左对齐-文本</p>
42
        <!--向右对齐-->
43
        <ul class="nav navbar-nav navbar-right">
44
            <li class="dropdown">
45
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
46
                    Java <b class="caret"></b>
47
                </a>
48
                <ul class="dropdown-menu">