个人中心
gpt4 book ai didi

html - 在页面标题 Bootstrap 中垂直居中无序列表

转载 作者：行者123 更新时间：2023-11-28 10:01:06 25 4
gpt4 key购买 nike

我正在使用 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;
}

最佳答案

对于超小型设备:

<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

关于html - 在页面标题 Bootstrap 中垂直居中无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24718845/

25 4 0
文章推荐： javascript - 在 JavaScript 中提取当前页面 URL 的一部分
文章推荐： php - 在 Zend 表单中放置一个提交按钮的图标
文章推荐： css - 如何在更改字体大小的情况下使文本在 block 元素中垂直居中？
文章推荐： javascript - 从 ajax 检索时无法识别和显示 HTML 实体
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com