Fatal编程技术网
  • html/
  • Html 页面标题引导中的无序列表垂直居中

Html 页面标题引导中的无序列表垂直居中

html css twitter-bootstrap

Html 页面标题引导中的无序列表垂直居中,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在开发一个网站，为当地企业的帮助下引导，他们希望他们的联系方式在右边的页面标题，而不是导航栏。我正在尝试使用无序列表和Bootstrap的柱网系统来显示他们的电话号码和电子邮件地址，以及其他可能的内容，比如类似Facebook的按钮。我需要一些帮助，以垂直中心的内容，因为目前的电话号码是在底部的页面标题和电子邮件地址是由导航栏覆盖。 我的代码如下所示： <!DOCTYPE html> <html> <head> <title>Excel

我正在开发一个网站，为当地企业的帮助下引导，他们希望他们的联系方式在右边的页面标题，而不是导航栏。我正在尝试使用无序列表和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>
对于超小型设备：

我把联系信息贴在了图片下面，所以当设备尺寸调整到一个额外的小屏幕时，不会给移动用户带来不便，让他们看到它放在了下拉菜单里面，这不是一个漂亮的网站

对于所有其他尺寸：

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

你可以发布你的CSS或者制作一个新的。我很难看到没有它的问题，尽管我对引导没有特别的经验。很抱歉漏掉了这么重要的一部分。嗯，有什么理由用X代替X吗？只是Bootstrap要求在页面上以文本形式显示图标和图标后的部分，而不是作为跨度的一部分显示联系人号码和电子邮件地址。更改它只会更改电话号码的字体系列。请将其放在JSFIDLE中。 
.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;
}

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