0
Может ли заголовок/nav быть полностью заполнен шириной?
Так что это моя проблема с Bootstrap 3. До сих пор мне это нравилось. С настройкой CSS он чувствует, что он может ВСЕГДА сделать что-нибудь. Тем не менее, я немного ударил. У меня есть настройка Header/Nav, при этом заголовок отображает центрированное изображение над меню. Кроме того, когда сайт сжимается, чтобы соответствовать ... заголовочное меню отказывается заполнять всю длину. Он останавливается у края окна.
Отлично, если вы смотрите на него на весь экран. Если нет, это заставляет странный пробел над контентом к краю страницы. Как я могу заставить его заполнить «страницу» вместо «окна»?
<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 для форматирования правильно для стека, так вот ссылка: http://pastebin.com/xRqAaeXA
К сожалению, но это является неполным без фактически демо вашего кода. –
Мы не можем вам помочь, если вы не разместите свой код. –
Как уже было сказано, мы можем только догадываться, не видя кода. Но, используя инструменты разработчика, вы можете найти оболочку, которая ограничивает ширину и переопределяет css с помощью {Width: 100%! Important} –