<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
我正在使用 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>
最佳答案
打开 firebug 并检查 body 标签以查看宽度 100% 是否来自哪个样式表。 Bootstrap 3 非常专注于响应式布局，因此这是有道理的。
如果它是一个新站点，它将具有 100% 的宽度，因为它存在于 block 级 html 标记中，在您指定之前不会有宽度限制。我也没有看到任何 Bootstrap 类名称来强制宽度。
作为开发人员，您应该几乎总是关闭缓存 :) 大多数浏览器 Web 开发工具栏都提供此选项。
希望这能给你一个起点。发现宽度的来源应该非常简单。
关于css - Bootstrap 中突然 100% 宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18660343/