Question

我有一个Twitter bootstrap网站，无法弄清楚如何在不破坏的情况下使设计工作。当站点宽度大于约770px时，它运行良好，但旋转木马两侧的两个div相对定位，以便将它们向下移动以获得美学效果（客户如何想要它）。问题是，一旦站点宽度达到大约770px，右侧div开始与下面的一个碰撞，然后在大约735它真正中断。我试图使用媒体查询（我不是很有经验使用媒体查询）来纠正这个问题，但它似乎导致其他问题（我不能让css保持一致）我想知道是否有人可以想到一个更好的解决方案，然后再与css争吵。

你可以在这里看到：

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

Answer 1

好的，所以改变你的“顶部：......;”两个边框中的每一个的规则为“margin-top：......;”我想这会解决你的问题。

Answer 2

@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％的轮播图像问题（查看1330px或767px以上的网站以查看轮播图像不能一直伸展，您需要添加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 */
}

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

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

另一件事 我知道你说你对媒体查询不太满意，但是当跨度崩溃时，你的疯狂顶部利润率低于767px。

我建议您将其添加到bootstrap-and-overrides.css文件中：

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

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

寻找响应式设计解决方案

2 个答案: