Question

我正在Bootstrap的帮助下为本地企业开发一个网站，他们希望他们的联系方式位于页眉的右侧（不是导航栏）。我正在尝试使用无序列表和Bootstrap的列网格系统来显示他们的电话号码和电子邮件地址，以及可能的其他内容，例如像Facebook一样的按钮。我需要一些帮助来垂直居中内容，因为目前电话号码位于页眉的底部，电子邮件地址被导航栏覆盖。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Excellent Carpet Cleaning - Sample 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<!--header image-->
<div class="page-header">
        <center><a href="index.html"><img src=http://goo.gl/Yk0lCv width=50%/></a></center>
    <div class="col-sm-3 pull-right">
        <ul>
            <li><span class="glyphicon glyphicon-earphone"></span>555-5555</li>
            <li><span class="glyphicon glyphicon-envelope"></span>someone@example.com</li>
        </ul>
    </div>
</div>
<!--top navbar-->
<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-center">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Current Offers</a></li>
                <li><a href="https://facebook.com/aidansexcellentcarpetcleaning">Facebook</a></li>
                <li><a href="#contact" data-toggle="modal">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

它链接到bootstrap.min.css，可以下载here和我自己的外部样式表：

.navbar-default {
    background-color: #0000ff;
    border-color: #0000a0;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #ffffff;
}
.navbar-default .navbar-text {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #0000a0;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #0000a0;
}
.navbar-default .navbar-toggle {
    border-color: #0000a0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #0000a0;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
}
.navbar-default .navbar-link {
    color: #ffffff;
}
.navbar-default .navbar-link:hover {
    color: #ffffff;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #0000a0;
    }
}
/*end navbar*/
body {
    padding-top: 0;
}
.page-header {
    margin-top: 10px;
    margin-bottom: 10px;
}
.page-footer {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: #0000ff;
    color: #ffffff;
    border-color: #bb0000;
}
li {
    list-style-type: none;
}

Answer 1

适用于超小型设备：

<div class="page-header" style="text-align:center;">
    <center>
        <a href="index.html"><img src="http://goo.gl/Yk0lCv" width="50%"/></a>   
    </center>
    <div class=" hidden-lg hidden-md hidden-sm"> <span class="glyphicon glyphicon-earphone "></span> 555-5555 <span class="glyphicon glyphicon-envelope"></span> someone@example.com</div>
</div>

我接收了联系信息并将其粘贴在图像下方，因此当设备尺寸设置为超小屏幕时，移动用户看到它放置在下拉菜单内（不是漂亮的网站）不会带来不便。

适用于所有其他尺寸：

    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-center">
            <li class="active"><a href="index.html">Home</a>

            </li>
            <li><a href="#">Our Services</a>

            </li>
            <li><a href="#">Current Offers</a>

            </li>
            <li><a href="https://facebook.com/aidansexcellentcarpetcleaning">Facebook</a>

            </li>
            <li><a href="#contact" data-toggle="modal">Contact Us</a>

            </li>
            <li class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span> 555-5555
                <br/> <span class="glyphicon glyphicon-envelope"></span> someone@example.com</li>
        </ul>
    </div>

我添加了您的联系信息并将其放在导航栏内，以便在一个列表标签中，这样两个项目都会适当调整大小，并且当用户调整到一个额外的小设备时也会隐藏。

<强> DEMO JSFiddle

垂直居中页面标题Bootstrap中的无序列表

1 个答案: