0

我正在使用 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>
4

1 回答 1

0

弹出打开 firebug 并检查 body 标签,看看宽度 100% 来自哪个样式表。Bootstrap 3 非常专注于响应式布局,所以这是有道理的。

如果它是一个新站点,它将具有 100% 的宽度,因为它存在于块级 html 标记中,在您提供之前不会有宽度限制。我也没有看到任何引导类名称来强制宽度。

作为开发人员,您应该几乎总是关闭缓存 :) 大多数浏览器 Web 开发工具栏都提供此选项。

希望能给你一个起点。发现宽度的来源应该非常简单。

于 2013-09-06T14:50:41.000 回答