我正在为我正在制作的网站使用twitter-bootstrap。直到今天我才看到我的13英寸macbook上的网站,看到它看起来很可怕。特别是第一节,其余的都很好。顶部文本的宽度变得更小,因此文本会折叠并将其余部分向下推。这使得某些文字落在了首位。
没有太多文字,所以我不明白为什么会发生这种情况。 我为较小的桌面屏幕创建了一个新的样式表,虽然我不确定这是否真的是必要的,因为这是唯一的代码;
.containerdiv {
padding-left:5% !important;
text-align:left;
padding-top:4%;
}
我也改变了我的索引;
<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"><img src="css/images/logo.png" class="float">
<h1 style="padding-top:84px; padding-left:10px;" class="logotitle">KONIJNTJES</h1>
<h2 class="sublogo">Nerds zonder grenzen</h2>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 pushleft">
<p class="lead">
<b>ICT Dienstverlening</b> gecombineerd met<br> <b>Software</b> & <b>Ruimtevaart ontwikkeling.</b>
</p>
到此;
<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
<div class="row">
<div class="col-md-4 col-lg-4 logo">
</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"><img src="css/images/logo.png" class="float">
<h1 style="padding-top:84px; padding-left:10px;" class="logotitle">KONIJNTJES</h1>
<h2 class="sublogo">Nerds zonder grenzen</h2>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 pushleft">
<p class="lead">
<b>ICT Dienstverlening</b> gecombineerd met<br> <b>Software</b> & <b>Ruimtevaart ontwikkeling.</b>
</p>
但这并没有真正做任何事情。空div在移动设备上消失,但不在13英寸屏幕上消失。此外,我似乎无法使div更广泛,以便文本不再被推下来。将第一部分的内容整齐地显示出来而不是折断并推下来的最佳解决方案是什么?
我的完整代码就在这里,万一有帮助; http://kellyvuijst.nl/FINAL