个人中心
gpt4 book ai didi

html - Bootstrap 将 header 与数据对齐

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

我正在尝试创建一个静态网页(下面的代码)，但我无法将标题中的 +plus 图标与下面的设置图标 (glyphicon-cog) 对齐。我尝试了从向右拉到填充的所有方法，但加号图标拒绝让步。关于如何做到这一点的任何想法 - 我正在寻找一个干净的响应式解决方案，而不是像添加填充或空格这样的快速修复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container row">
        <div class="col-xs-1 hidden-xs">
            <div class="navbar-header">
                <p class="navbar-text">
                    <a href="profile.html" class="navbar-link">
                        <span class="glyphicon glyphicon-chevron-left glyphiconBackProperties default-blue"></span></a>
                </p>
            </div>
        </div>

        <div class="col-xs-10">
            <div class="navbar-header">
                <a class="navbar-brand default-blue" href="#">
                    Websites
                </a>
            </div>
        </div>

        <div class="col-xs-1 hidden-xs">
            <div class="navbar-header">
                <p class="navbar-text">
                    <a href="website-new.html" class="navbar-link">
                        <span class="glyphicon glyphicon-plus glyphiconPlusProperties default-blue"></span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <ul class="ul-wo-bullets">
        <li>
            <a href="page-list.html" class="blueColorText nounderline">Address Book App</a>
            <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs">
                      </span>
            </a>
        </li>
        <li>
            <a href="page-list.html" class="blueColorText nounderline" >Blogger</a>
            <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs">
                      </span>
            </a>
        </li>
        <li>

            <a href="page-list.html" class="blueColorText nounderline">Blogging App</a>
            <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs">
                      </span>
            </a>

        </li>
        <li>

            <a href="page-list.html" class="blueColorText nounderline">Script Testing App</a>
            <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs">
                      </span>
            </a>
        </li>
    </ul>
</div>


<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container-fluid">

        <p class="navbar-text pull-right">
            <a href="profile.html" class="navbar-link">
                    <span class="glyphicon glyphicon-user glyphiconUserProperties default-blue">
          </span>
            </a>
        </p>
    </div>
</nav>

</body>
</html>

最佳答案

使用 .navbar-right而不是 .pull-right并删除 .row .我还更新了标记以包含一个 <div class="navbar-header">因为我认为它旨在在导航栏中使用一次而不是多次。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-xs-1 hidden-xs">
      <p class="navbar-text">
        <a href="profile.html" class="navbar-link">
          <span class="glyphicon glyphicon-chevron-left glyphiconBackProperties default-blue"></span>
        </a>
      </p>
    </div>

    <div class="col-xs-10">
      <div class="navbar-header">
        <a class="navbar-brand default-blue" href="#">Websites</a>
      </div>
    </div>

    <div class="col-xs-1 hidden-xs">
      <p class="navbar-text navbar-right">
        <a href="website-new.html" class="navbar-link">
          <span class="glyphicon glyphicon-plus glyphiconPlusProperties default-blue"></span>
        </a>
      </p>
    </div>
  </div>
</nav>

<div class="container">
  <ul class="ul-wo-bullets">
    <li>
      <a href="page-list.html" class="blueColorText nounderline">Address Book App</a>
      <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs"></span>
      </a>
    </li>
    <li>
      <a href="page-list.html" class="blueColorText nounderline">Blogger</a>
      <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs"></span>
      </a>
    </li>
    <li>

      <a href="page-list.html" class="blueColorText nounderline">Blogging App</a>
      <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs"></span>
      </a>

    </li>
    <li>

      <a href="page-list.html" class="blueColorText nounderline">Script Testing App</a>
      <a href="website-edit.html">
        <span class="glyphicon glyphicon-cog pull-right hidden-xs"></span>
      </a>
    </li>
  </ul>
</div>


<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">

    <p class="navbar-text pull-right">
      <a href="profile.html" class="navbar-link">
        <span class="glyphicon glyphicon-user glyphiconUserProperties default-blue">
          </span>
      </a>
    </p>
  </div>
</nav>

我删除了 .row形成你的导航栏，因为 Bootstrap 文档没有任何使用它的示例。这并不是说你不能使用 .row在导航栏中，但如果你确实使用它，请注意 .row有一个 -15px左右边距可能会干扰导航栏类的对齐。

注意: .container和 .row Bootstrap 的类应该在单独的元素上使用，参见 Bootstrap Grid documentation .

关于html - Bootstrap 将 header 与数据对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39838418/

25 4 0
文章推荐： html - html : markup is correct but dev tools show <title> moving to 的奇怪问题
文章推荐： javascript - 从 iframe 中抓取特定数据
文章推荐： c++ - IOCP 的内存使用
文章推荐： c++ - boost::locale::date_time:如何从 Boost C++ 中的 date_time 对象获取数据？
行者123
个人简介

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

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