Внезапный 100% широкий в Bootstrap

62
7

Я реализую большой проект с Bootstrap 3, и сегодня я увидел, что внезапно сайт на 100% ширине. Из-за кеша браузера это произошло вчера, но я только видел его сегодня, поэтому я не знаю, какой фрагмент кода я работал над тем, что вызвало его. Я не помню, чтобы возиться с переменными, grid.less или любым файлом, который традиционно может иметь какое-то отношение к ширине сайта.

Будучи таким, я немного потерян! Где бы вы предложили мне посмотреть? Я отключил пользовательские файлы CSS один за другим, и ничего...

Я не могу отправить ссылку, поскольку я работаю на виртуальной машине, я привязываю код из основного файла макета, на всякий случай.

<?php echo $this->docType().PHP_EOL;?>
<html lang="<?php echo Inwx_Website::getLanguage();?>">
<head>
<?php
echo $this->headMeta().PHP_EOL;
echo $this->headTitle().PHP_EOL;
echo $this->headLink().PHP_EOL;
echo $this->headStyle();
?>
</head>

<body ng-app="inwxApp">
<div class="viewport">
<div class="frame">
<div class="view" ng-controller="FrontCtrl">
<div id="ajax-loading">
<img src="/img/ajax-loader.gif" class="ajax-loader"/>
</div>
<!--Nav Top Blue-->
<div>
<div class="navbar navbar-static-top">
<div class="container">
<div class="navbar-collapse collapse">
<a class="pull-left" href="<?php echo $this->url(array('controller'=>'index','action'=>'index'),'default',true);?>" target="_top">
<img src="/img/logo-inwx.png" alt="InterNetworx" title="InterNetworx"/>
</a>
<div class="row col-md-3 pull-right">
<div class="pull-right">
<?php echo $this->drawLanguages();?>
</div>
</div>
<div class="row col-md-8 pull-right ix-login" ng-show="loggedin==0" ng-cloak>
<ul class="pull-right">
<li><a href="" class="ix-login-buttons ix-popover" data-toggle="popover" data-placement="bottom"><?php echo _t("Login")?></a></li>
<li><a class="ix-login-buttons" href="<?php echo $this->url(array('controller'=>'customer','action'=>'signup'),'default');?>"><?php echo _t("Register")?></a></li>
</ul>
<form id="main-loginform" ng-submit="login('main-loginform')">
<input class="col-md-2" type="text" placeholder="<?php echo _t('Username')?>" ng-model="username" name="username" value="">
<input class="col-md-2" type="password" placeholder="<?php echo _t('Password')?>" ng-model="password" name="password" value="">
<button type="submit" class="btn btn-default btn-success"><?php echo _t("Login")?></button>
<a href="#modal-forgotten-password" role="button" data-toggle="modal" class="small"><?php echo _t("Forgot your password?")?></a>
</form>
</div>

<!-- logged in: user -->
<div class="ix-info-costumer pull-right" ng-show="loggedin==1" ng-cloak>
<ul class="ix-down">
<li><?php echo _t('Username')?>: {{userData.firstname}} {{userData.lastname}}</li>
<li><?php echo _t('Credit balance')?>: {{creditData.available | currency: '€'}}</li>
<li><?php echo _t('Customer id')?>: {{userData.customerId}}</li>
<li><?php echo _t('Service PIN')?>: {{userData.servicePin}}</li>
<li><a href="#" ng-click="logout()"><?php echo _t('Logout')?></a>
</ul>
</div>

</div>
</div>
</div><!--/Nav Top Blue-->

<!--Nav Grey-->
<div class="navbar navbar-static-top ">
<div class="container">
<div class="navbar-collapse collapse">
<ng-include src="'<?php echo $this->url(array('controller'=>'index','action'=>'navi'),'default',true);?>'"></ng-include>
<div class="pull-right" ng-show="cartData.list.length">
<!-- shopping cart info -->
<a class="btn btn-default btn-sm ix-btn-custom" data-placement="bottom"><img src="/img/shopping-icon.png" />{{cartData.list.length}}</a>
<div id="popover_content_wrapper" style="display:none">
<div class="row ix-shop-popover">
<div class="pull-left">
<ul class="ix-shop-popover">
<li>{{cartData.list.length}} <?php echo _t("Items")?></li>
</ul>
</div>
<div class="pull-right">
<ul class="ix-shop-popover">
<li>{{cartData.totalPrice | currency: '€'}}</li>
</ul>
</div>
</div>
<div class="ix-divider">
<div class="pull-left">
<a href="#" class="ix-white"><?php echo _t("Empty cart")?></a>
</div>
<div class="pull-right">
<a href="<?php echo $this->url(array('controller'=>'cart','action'=>'index'),'default');?>" class="btn btn-default btn-success btn-xs"><?php echo _t("Check Out")?></a>
</div>
</div>
</div>

</div>
</div>
</div>
</div> <!--/Nav Grey-->

</div> <!-- end of InitCtrl -->
<!--Content-->
<div class="container">
<div class="row">
<!--Domain Search Static in all pages-->
<div class="col-md-6">
<form class="form-inline" role="form">
<div class="form-group">
<?php echo _t("DOMAIN CHECK")?>:
</div>
<div class="form-group pull-right">
<a href="<?php echo $this->url(array('controller'=>'domain','action'=>'check'),'default');?>" ng-click="triggerCheck()" class="btn btn-default btn-success"> <i class="icon-white icon-search"></i> <?php echo _t("Search")?></a>
</div>
<div class="col-md-7 pull-right">
<div class="input-group">
<label class="sr-only" for="exampleInputEmail2"><?php echo _t('My Domain'); ?></label>

<input placeholder="<?php echo _t('My Domain'); ?>" type="text" ng-model="domain" class="form-control" id="exampleInputEmail2">

<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<?php echo _t("Default")?>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><?php echo _t("Generic")?></a></li>
<li><a href="#"><?php echo _t("America")?></a></li>
<li><a href="#"><?php echo _t("Europe")?></a></li>
<li><a href="#"><?php echo _t("Asia")?></a></li>
<li><a href="#"><?php echo _t("Africa")?></a></li>
<li><a href="#"><?php echo _t("Oceania")?></a></li>
<li><a href="#"><?php echo _t("All")?></a></li>
<li><a href="#"><?php echo _t("New TDLs")?></a></li>
</ul>
</span>
</div>
</div>

</form>
</div>
</div>
<div class="row">
<!--/Domain Search Static in all pages-->
<?php echo $this->navigation()->breadcrumbs()->setSeparator("/"); ?>
<?php echo $this->layout()->content; ?>
</div>
</div>
</div>
</div>
</div>
<?php
echo $this->headScript().PHP_EOL;
echo $this->inlineScript().PHP_EOL;
?>
</body>
</html>

спросил(а) 2013-09-06T17:37:00+04:00 6 лет, 5 месяцев назад
1
Решение
102

Откройте открытый firebug и проверьте тег тела, чтобы узнать, из какой стили набирается ширина 100%. Bootstrap 3 очень ориентирован на гибкие макеты, поэтому это имеет смысл.

Если это новый сайт, он будет иметь ширину 100%, как он есть, в теге html уровня блока, который не будет иметь ограничение ширины, пока вы не дадите его. Я не вижу ни одного имени класса начальной загрузки для обеспечения ширины.

Как разработчик, вы должны отключить кеш почти всегда :). Большинство панелей инструментов веб-разработчиков браузера предоставляют это как опцию.

Надеюсь, это даст вам отправную точку. Обнаружение источника ширины должно быть довольно простым.

ответил(а) 2013-09-06T17:50:00+04:00 6 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема