Question

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

int(11) default NULL,

Answer 1

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

＆＃13;

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

＆＃13;

我从导航栏中删除了.row，因为Bootstrap文档没有任何使用它的示例。这并不是说您无法在导航栏中使用.row，但如果您确实使用它，请注意.row左右边距可能-15px搞乱Navbar类的对齐。

注意：应在单独的元素上使用Bootstrap的.container和.row类，请参阅Bootstrap Grid documentation。

Bootstrap将标头与数据对齐

1 个答案: