Question

我没有bootstrap / html / css专家，我最近开始搞乱一些模板/代码，并开始为我的兄弟做一个网站。

我对结果非常满意，对于第一个计时器而且4天后我可以说我达到了我想要的效果。但是，移动版似乎无法在每个浏览器/分辨率上正常运行。我不知道自己做错了什么。我在Chrome上尝试过我的Xperia ZL，一切都很好看。但在iPhone上，它看起来像http://i.imgur.com/ZTWyxX0.png。（网站：http://www.maconneriesdi.com）

正如您所看到的，＆＃34;关于＆＃34;部分重叠＆＃34;工作＆＃34;在iPhone上的部分（几乎720p）。我试过我的Xperia S（720p）并遇到了同样的问题。试过不同的浏览器。在iPad和Xperia ZL（1080p）上，网站看起来很不错。当我将计算机（1400x900）上的窗口调整到最小时，我也不会在我测试的每个浏览器上出现这个问题。此外，我在网站上使用的字体不适用于移动设备。

这是我的代码

<head>
  <title>Maçonnerie SDI</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/grayscale.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=cyrillic,cyrillic-ext,latin,greek-ext,greek,latin-ext,vietnamese' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>

</head>

这就是＆＃34;关于＆＃34;节

<!--ABOUT SECTION-->
<div class="row">
<section id="about" class="container content-section text-center">
    <div class="row">
        <h1 class="col-xs-8 col-xs-offset-2 text-uppercase"><strong>À propos de nous</strong></h1>
        <div class="row">
            <p class="col-xs-8 col-xs-offset-2 lead">Dans une industrie de plus en plus compétitive telle que la maçonnerie, rares sont ceux qui se démarquent.</p>
        </div>
        <div class="row">
            <p class="col-xs-8 col-xs-offset-2 lead">Constamment à la recherche de la perfection en matière de rapidité, d'efficacité et d'exactitude, Maçonnerie SDI allie expérience et énergie pour mener à terme tous ses projets indépendamment de ses envergures.</p>
        </div>
        <div class="row">
            <p class="col-xs-8 col-xs-offset-2 lead">Forte de son ambition et de sa volonté, elle s'impose déjà comme un des leaders de sa catégorie en maçonnerie au Québec.</p>
        </div>
    </div>
</section>
</div>

<!--WORK SECTION-->
<div id="work" class="row">
    <div class="jumbotron">
        <div class="container">
            <h2 class="text-uppercase text-center">Réalisations</h2>
            <button type="button" class="btn btn-sm center-block" data-toggle="collapse" data-target="#gallery">Voir projets</button>
        </div><!--div container-->
    </div><!--div collape-->
</div>

CSS：

body {
    width: 100%;
    height: 100%;
    font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #000;
    background-color: #fff;
}

html {
    width: 100%;
    height: 100%;
}

我做错了什么？

Answer 1

您已将about ID的高度硬编码为400px。这在大屏幕上很好，但是当文字包裹在较小的屏幕上时，它会将尺寸推大。当我在响应式设计模式下测试iPhone 4S（一个非常小的设备）上的实时站点链接时，尝试将#about高度更改为550px。

新代码应该看起来像

#about {padding-top:100px;height:550px;color: #000; background-color: #fff;}

同样作为一般规则，在HTML文档中使用样式规则是个坏主意。它最终变得混乱，意味着你不能在其他地方重用这些规则。始终创建一个css文件并在那里存储所有样式规则，然后在标题中调用该文件。

编辑：

更好的解决方案是，H。Allen建议完全删除高度参数，但如果你想让他们保持你需要做的改变。

Answer 2

摆脱高度属性。 Bootstrap会为您解决这个问题。

Answer 3

非常感谢你们！我以为我在关于部分编了错误！从没想过会是它！谢谢！

Answer 4

使用Bootstrap构建网站时遇到了同样的问题。尝试删除CSS中的高度属性。由于div使用Bootstrap响应调整大小，因此在设置特定高度时它并不喜欢它。

希望这有帮助！

某些设备上的Bootstrap混乱/重叠

4 个答案: