jquery - header/nav 是否可以强制完全填满宽度？-6ren

jquery - header/nav 是否可以强制完全填满宽度？

转载作者：太空宇宙更新时间：2023-11-04 02:48:34

所以这是我使用 Bootstrap 3 的问题。到目前为止，我很喜欢它。通过 CSS 自定义，感觉它几乎可以做任何事情。但是，我遇到了一些障碍。我有一个页眉/导航设置，页眉在菜单上方显示居中图像。除了，当网站缩小到适合...标题菜单拒绝填写整个长度。它停在窗口边缘。

太好了，如果您正在全屏查看它。如果不是，它会在内容上方强制一个奇怪的间隙到页面边缘。我怎样才能让它填充到“页面”而不是“窗口”间隙？

    <body class="container-bg">

<header class="navheader">
    <span class="logo"><a href="/"><?PHP echo $this->Html->image('Logo.png', array('alt' => 'Teonnyn', 'style' => 'width: 256px, height: 64px')); ?></a></span>
</header>     

<nav class="navbar navbar-inverse">
    <div class="container-full">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left col-md-2" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/Posts"><b>Posts</b></a></li>
            </li>
        </ul>

        <form class="navbar-form pull-right" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>                     

        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>



<div class="col-xs-12">
    <div class="container-full" role="main">
            <div class="col-xs-12"><?php echo $this->Flash->render() ?></div>

            <div class="col-xs-10 well">
                <?php echo $this->fetch('content'); ?>
            </div>  

            <div class="col-xs-2  pull-right">
                <?
                if (!AuthComponent::user('id'))
                {
                ?>
                    <div class="row">
                        <div class="col-md-12" >
                            <!--
                            <div class="social-buttons">
                                <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
                                <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
                            </div>
                            -->
                             <form id="login-dp" class="form well" role="form" method="post" action="/login" id="UserLoginForm" accept-charset="UTF-8" id="login-nav">
                                    <div class="form-group">
                                         <input class="form-control" name="data[User][username]" id="UserUsername" placeholder="Username" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" name="data[User][password]" class="form-control" id="UserPassword" placeholder="Password" required>
                                        <div class="help-block"><a href="/Register">Register an account!</a></div>
                                    </div>
                                    <div class="form-group">
                                         <button type="submit" class="btn btn-primary btn-block">Log In</button>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> remember me
                                        </label>
                                    </div>                                      
                             </form>
                        </div>
                    </div>              

                <?PHP
                }
                ?>

                <?PHP
                if (AuthComponent::user('id'))
                {                   
                ?>
                <ul class="nav nav-pills nav-stacked well">
                    <li role="presentation"><a href="/Dashboard"><span class="glyphicon glyphicon-calendar"></span>Dashboard</a></li>

                    <li role="presentation"><span><b>You</b></span></li>
                    <li role="presentation"><a href="/MultiPosts/Post"><span class="glyphicon glyphicon-pencil"></span>Post</a></li>
                    <li role="presentation"><a href="/Dashboard/Skills"><span class="glyphicon glyphicon-menu-up"></span>Skills</a></li>
                    <li role="presentation"><a href="/Dashboard/SavedSocials"><span class="glyphicon glyphicon-unchecked"></span>Social</a></li>

                    <li role="presentation"><span><b>Gallery</b></span></li>
                    <li role="presentation"><a href="/Dashboard/Images"><span class="glyphicon glyphicon-picture"></span>Images</a></li>
                    <li role="presentation"><a href="/Dashboard/Gallery"><span class="glyphicon glyphicon-th"></span>Galleries</a></li>
                    <li role="presentation"><a href="/Dashboard/Youtube"><span class="glyphicon glyphicon-facetime-video"></span>Youtube</a></li>       

                    <li role="presentation"><span><b>Users</b></span></li>
                    <li role="presentation"><a href="/Dashboard/Users"><span class="glyphicon glyphicon-user"></span>Users</a></li>
                    <li role="presentation"><a href="/Dashboard/Activations"><span class="glyphicon glyphicon-ok"></span>Activations</a></li>

                    <li role="presentation"><span><b>Structure</b></span></li>
                    <li role="presentation"><a href="/Dashboard/Grid"><span class="glyphicon glyphicon-qrcode"></span>Grids</a></li>
                    <li role="presentation"><a href="/Dashboard/Category"><span class="glyphicon glyphicon-duplicate"></span>Categories</a></li>

                </ul>
                <?PHP
                }
                ?>                                          
            </div>
    </div>
</div>

在我的一生中，我无法让 CSS 为 Stack 正确格式化，所以这里有一个链接:http://pastebin.com/xRqAaeXA

最佳答案

Logo 上的边距是一个问题，而且您实现网格系统的方式实际上没有任何意义。您的表单被推出页面，因为它被压缩到一个 col-xs-2 中，并且类 container-full 不是 container-fluid 的替代品，行/columns 与容器类交互，因此替换/更改它们可能会产生不利结果。

参见 Docs .

这里有两个示例来研究停止问题:请参阅代码段。

html {
  border-radius: 0px;
  padding: 0;
  margin: 0;
}
.container-bg {
  background-color: #e6eef2;
}
header {
  width: 100%;
  text-align: center;
  display: block;
  height: 75px;
  padding-top: 5px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+31,4f4f4f+91 */
  background: rgb(0, 0, 0);
  /* Old browsers */
}
.logo {
  font-size: 30px;
  vertical-align: middle;
  margin: 0;
}
.navbar-inverse {
  border-radius: 0px !important;
}
.wrapper {
  border: 0.1em solid #ccc;
  /* wrap the calendar inside a box */
  width: 100%;
  /* define a width for the box */
  border: #000 dashed 1px;
  box-shadow: 0.1em 0.2em 0.8em #ccc;
  /* box shadow for better view */
}
.fc-widget-content,
.fc-day-header,
.fc-widget-header {
  background-color: #FFF;
}
.fc-day-number {
  visibility: hidden;
}
.container-full {
  margin: 0 auto;
  width: 100%;
}
/* centered columns styles */

.message {
  width: 100%;
  min-height: 30px;
  font-size: 18px;
  padding: 5px;
  background: #286090;
  border: #000 solid 2px;
  color: #fff;
  margin-bottom: 10px;
  text-align: center;
}
.container {
  display: table;
}
.row-fluid {
  height: 100%;
  display: table-row;
}
.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
}
.fill {
  background-color: #fff;
  height: 100%;
  display: table-cell;
}
.form-horizontal .control-label {
  text-align: left;
}
#login-dp {
  min-width: 250px;
  padding: 14px 14px 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .8);
}
#login-dp .help-block {
  font-size: 12px
}
#login-dp .bottom {
  background-color: rgba(255, 255, 255, .8);
  border-top: 1px solid #ddd;
  clear: both;
  padding: 14px;
}
#login-dp .social-buttons {
  margin: 12px 0
}
#login-dp .social-buttons a {
  width: 49%;
}
#login-dp .form-group {
  margin-bottom: 10px;
}
.btn-fb {
  color: #fff;
  background-color: #3b5998;
}
.btn-fb:hover {
  color: #fff;
  background-color: #496ebc
}
.btn-tw {
  color: #fff;
  background-color: #55acee;
}
.btn-tw:hover {
  color: #fff;
  background-color: #59b5fa;
}
@media(max-width:768px) {
  #login-dp {
    background-color: inherit;
    color: #fff;
  }
  #login-dp .bottom {
    background-color: inherit;
    border-top: 0 none;
  }
}
.blurb {
  display: block;
  float: left;
  padding: 15px 20px 15px;
  margin-left: -20px;
  color: #e7e7e7;
}
.datatable {
  font-size: 8px;
}
th {
  font-weight: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body class="container-bg">
  <header class="navheader"> <span class="logo"><a href="#"> <img src="http://placehold.it/256x64"></a></span>

  </header>
  <nav class="navbar navbar-inverse">
    <div class="container-full">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed pull-left col-md-2" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/Posts"><b>Posts</b></a>

          </li>
          </li>
        </ul>
        <form class="navbar-form pull-right" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>

              </button>
            </div>
          </div>
        </form>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
  <div class="container-fluid" role="main">
    <div class="row">
      <div class="col-sm-4 well">Something</div>
      <div class="col-sm-8">
        <form id="login-dp" class="form well" role="form" method="post" action="/login" id="UserLoginForm" accept-charset="UTF-8" id="login-nav">
          <div class="form-group">
            <input class="form-control" name="data[User][username]" id="UserUsername" placeholder="Username" required>
          </div>
          <div class="form-group">
            <input type="password" name="data[User][password]" class="form-control" id="UserPassword" placeholder="Password" required>
            <div class="help-block"><a href="/Register">Register an account!</a>

            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Log In</button>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox">remember me</label>
          </div>
        </form>
      </div>
    </div>
    <ul class="nav nav-pills nav-stacked well">
      <li role="presentation"><a href="/Dashboard"><span class="glyphicon glyphicon-calendar"></span>Dashboard</a>

      </li>
      <li role="presentation"><span><b>You</b></span>

      </li>
      <li role="presentation"><a href="/MultiPosts/Post"><span class="glyphicon glyphicon-pencil"></span>Post</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Skills"><span class="glyphicon glyphicon-menu-up"></span>Skills</a>

      </li>
      <li role="presentation"><a href="/Dashboard/SavedSocials"><span class="glyphicon glyphicon-unchecked"></span>Social</a>

      </li>
      <li role="presentation"><span><b>Gallery</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Images"><span class="glyphicon glyphicon-picture"></span>Images</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Gallery"><span class="glyphicon glyphicon-th"></span>Galleries</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Youtube"><span class="glyphicon glyphicon-facetime-video"></span>Youtube</a>

      </li>
      <li role="presentation"><span><b>Users</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Users"><span class="glyphicon glyphicon-user"></span>Users</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Activations"><span class="glyphicon glyphicon-ok"></span>Activations</a>

      </li>
      <li role="presentation"><span><b>Structure</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Grid"><span class="glyphicon glyphicon-qrcode"></span>Grids</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Category"><span class="glyphicon glyphicon-duplicate"></span>Categories</a>

      </li>
    </ul>
  </div>
  <hr>
  <header class="navheader"> <span class="logo"><a href="#"> <img src="http://placehold.it/256x64"></a></span>

  </header>
  <nav class="navbar navbar-inverse">
    <div class="container-full">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed pull-left col-md-2" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/Posts"><b>Posts</b></a>

          </li>
          </li>
        </ul>
        <form class="navbar-form pull-right" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>

              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </nav>
  <div class="container-fluid" role="main">
    <div class="row">
      <div class="col-sm-12 well">Something</div>
      <div class="col-sm-12">
        <form id="login-dp" class="form well" role="form" method="post" action="/login" id="UserLoginForm" accept-charset="UTF-8" id="login-nav">
          <div class="form-group">
            <input class="form-control" name="data[User][username]" id="UserUsername" placeholder="Username" required>
          </div>
          <div class="form-group">
            <input type="password" name="data[User][password]" class="form-control" id="UserPassword" placeholder="Password" required>
            <div class="help-block"><a href="/Register">Register an account!</a>

            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block">Log In</button>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox">remember me</label>
          </div>
        </form>
      </div>
    </div>
    <ul class="nav nav-pills nav-stacked well">
      <li role="presentation"><a href="/Dashboard"><span class="glyphicon glyphicon-calendar"></span>Dashboard</a>

      </li>
      <li role="presentation"><span><b>You</b></span>

      </li>
      <li role="presentation"><a href="/MultiPosts/Post"><span class="glyphicon glyphicon-pencil"></span>Post</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Skills"><span class="glyphicon glyphicon-menu-up"></span>Skills</a>

      </li>
      <li role="presentation"><a href="/Dashboard/SavedSocials"><span class="glyphicon glyphicon-unchecked"></span>Social</a>

      </li>
      <li role="presentation"><span><b>Gallery</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Images"><span class="glyphicon glyphicon-picture"></span>Images</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Gallery"><span class="glyphicon glyphicon-th"></span>Galleries</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Youtube"><span class="glyphicon glyphicon-facetime-video"></span>Youtube</a>

      </li>
      <li role="presentation"><span><b>Users</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Users"><span class="glyphicon glyphicon-user"></span>Users</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Activations"><span class="glyphicon glyphicon-ok"></span>Activations</a>

      </li>
      <li role="presentation"><span><b>Structure</b></span>

      </li>
      <li role="presentation"><a href="/Dashboard/Grid"><span class="glyphicon glyphicon-qrcode"></span>Grids</a>

      </li>
      <li role="presentation"><a href="/Dashboard/Category"><span class="glyphicon glyphicon-duplicate"></span>Categories</a>

      </li>
    </ul>
  </div>
</body>

关于jquery - header/nav 是否可以强制完全填满宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33419351/

文章推荐： c - FCFS vs SJF vs RR

文章推荐： node.js - Node && Mongodb findOne 不工作

文章推荐： c - 带有 EAP-TLS 原始套接字的 OpenSSL

java - 并行流看起来不像是并行工作，完全
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
java - 完全 OR 的正则表达式包含
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。例如，所有这些样本应返回 Glentworth+Ireland: Glentw
javascript - 如何(完全)复制文件但更改文件名？
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。目前我正在这样做: uploadFile.map((file) => { if (fi
haskell - 为什么您不能(完全)应用具有使用其他类型同义词的参数的类型同义词？
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
delphi - 需要计算哪些像素是(完全)透明的
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
.net - Powershell 卸载模块...完全
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
elasticsearch - ElasticSearch中的半完全(完全)匹配
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
ASP.NET - 信任级别 = 完全？
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
ajax - 完全 Ajax 应用程序的基于内容的广告
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
c# - 如何判断文件是否已*完全*写入
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
javascript - Disqus 评论框不显示(完全)
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
python - 完全 Cython 化的应用程序
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
c# - 隐藏控制台应用程序的控制台(完全)，但只是有时
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。我找到了
algorithm - 完全 K 叉树
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。我注意到第一层有一
java - 完全 volatile 可见性保证
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
algorithm - NP 完全 - 在非确定性多项式时间内可解
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
algorithm - 子集推理 NP 完全？
考虑以下问题: 有N个硬币，编号为1到N。你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
c++ - 如何使用户定义的类型像内置类型一样*完全*地初始化？
我想制作一个包装数字类型的类型(并提供额外的功能)。此外，我需要数字和包装器可以隐式转换彼此。到目前为止我有: template struct Wrapper { T value;

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - header/nav 是否可以强制完全填满宽度？