Twitter bootstrap 寻找响应性设计解决方案

我有一个推特引导网站，不知道如何让设计工作不中断。当场地宽度大于770px时，效果良好，但旋转木马两侧的两个div相对定位，以便向下移动以获得美学效果（客户希望的方式）。问题是，一旦站点宽度达到770px左右，右侧的div开始与下面的div发生碰撞，然后在735左右，它真的断裂了。我曾尝试使用媒体查询（我在使用媒体查询方面不是很有经验）来纠正这个问题，但它似乎会导致其他问题（我无法使css保持一致），我想知道在与css争论数小时之前，是否有人能想出更好的解决方案

你可以在这里看到：

---

好的，将两个边框的“顶部：…；”规则更改为“边距顶部：…；”，我认为这将解决您的问题。

@Skrivener对浮动div的看法绝对正确

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

及

但是，还有一个问题需要注意：

这个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处的站点以查看旋转木马图像未完全伸展，则需要将

宽度：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（if-Rails）编译的。因此，您可能需要将这个较短的版本添加到bootstrap-and-overrides.css中：

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

还有一件事 我知道你说过你不太喜欢媒体查询，但当跨度崩溃时，你的最高利润率会在767px以下

我鼓励您将此添加到

引导和覆盖.css文件中：

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

它会很好地清理页面上的空白。
你可以通过给转盘对象分配一个特定的类名来隔离CSS问题。我会为你做一个完整的答案。谢谢你的帮助。我尝试过空白边距作为我第一次尝试修复它，但是这似乎引起了一些奇怪的无法解释的问题。d up使用的是将.affordable和.valuelist div包装到另一个div中，然后使用媒体查询添加最小宽度为737px的填充顶部。这似乎解决了问题。嗯。这在Chrome中对我很有效。继续吧，将您自己的解决方案作为您的答案发布并接受它。如果我提供了任何帮助，您可以随时向上投票给我的答案。
@media (max-width) {
  .affordable, .valuelist {
    margin-top: 0px;
  }
}