是否可以强制标题/导航完全填充宽度？
所以这是Bootstrap 3的问题。到目前为止，我已经喜欢它了。使用CSS自定义，它感觉它可以做几乎任何事情。但是，我遇到了一些障碍。我有一个Header / Nav设置，标题显示菜单上方的居中图像。除了，当网站缩小以适应...标题菜单拒绝填写整个长度。它停在窗口边缘。
太棒了，如果你全屏看它。如果没有，它会在页面边缘上方的内容上方产生一个奇怪的间隙。如何让它填写到＆＃34;页面＆＃34;而不是＆＃34;窗口＆＃34;间隙δ
<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
1 个答案:
答案 0 :(得分：2)
您的徽标上的边距是一个问题，您实施网格系统的方式并没有多大意义。您的表单被推离页面，因为它被挤压到col-xs-2而类container-full不能替代container-fluid，行/列与容器类交互，因此替换/改变它们会产生不利的结果。
请参阅Docs。
以下是两个关于停止isse的示例：请参阅Snippet。
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？