0

我有一个 twitter 引导网站，无法弄清楚如何在不中断的情况下使设计工作。当站点的宽度超过 770 像素时，它运行良好，但轮播两侧的两个 div 相对定位，以便将它们向下移动以获得美学效果（客户想要的方式）。问题是，一旦站点宽度达到大约 770 像素，右侧 div 开始与下方的 div 发生碰撞，然后在大约 735 处它真的会中断。我尝试使用媒体查询（我对使用媒体查询不是很有经验）来纠正问题，但它似乎会导致其他问题（我不能让 css 保持一致），我想知道是否有人在花费数小时与 css 争论之前，可以想出一个更好的解决方案。

在这里你可以看到它：

http://www.mcquistonator.com/pdxmobilebootstrap/index.html

4

2 回答 2

0

Okay, so change your "top: ...;" rules for each of the two side boxes to "margin-top: ...;" and I think this will solve your problem.

于 2013-06-15T01:47:54.107 回答
0

@Skrivener 关于浮动 div 绝对正确。

.valuelist {
  background-color: #787878;
  padding-left: 5px;
  border-radius: 5px;
  border: 2px solid #ffffff;
  position: relative;
  margin-top: 120px;
}

和

.affordable {
  position: relative;
  margin-top: 120px;
  background: #0e2b6f url('../img/peel.png') no-repeat fixed left top;
  color: #ffffff;
  border-radius: 5px;
  border: 2px solid #ffffff;
  padding: 5px;
  font-size: 150%;
  text-align: center;
  line-height: 120%;
}

不过，还有一个问题需要注意：

这个 img 标签会让你头疼：

/bootstrap.css:101
img {
  width: auto 9; /* the 9 is an error */
  height: auto;
  width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

因为它会同时调整您的徽标和轮播图像的大小。如果您想解决轮播图像不跨越 100% 的问题（查看 1330 像素以上或 767 像素的站点以查看轮播图像没有完全正确拉伸，您需要添加width: 100%;到此 css：

/bootstrap.css:5983
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
  width: 100%; /* add this one to fix span issue */
}

如果我没记错的话，它是从你的 gem 编译的（如果是 Rails）。因此，您可能必须将这个较短的版本添加到您的 bootstrap-and-overrides.css 中：

/bootstrap-and-overrides.css
.carousel-inner > .item > a > img {
  width: 100%; /* add this one to fix span issue */
}

还有一件事 我知道你说你对媒体查询不太感兴趣，但是当跨度崩溃时，你的上边距低于 767 像素。

我鼓励您将其添加到您的bootstrap-and-overrides.css文件中：

@media (max-width) {
  .affordable, .valuelist {
    margin-top: 0px;
  }
}

这将很好地清理页面上的空白区域。

于 2013-06-15T02:50:50.740 回答