0

我试图让我的 col-md-3 div 向左浮动。目前粘贴在下面的 CSS 可以很好地浮动。当我在 Chrome 中查看页面并使用开发人员工具并将浮动从“左”更改为“右”时，它会正确执行。因为我只想让一个班级漂浮在左边。我曾试图让它坐在其余部分之外并调用“float：right;” 就像这样：

.col-md-3{
float:right;
}

但是当我尝试它不会像我使用 chrome 开发人员工具更改该元素时那样向左浮动。有什么我忽略的吗？下面是我当前的 CSS，它正确地向右浮动，而不是向左浮动。

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11 {
    float: left;
  }
  .col-md-1 {
    width: 8.333333333333332%;
  }
  .col-md-2 {
    width: 16.666666666666664%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333333333333%;
  }
  .col-md-5 {
    width: 41.66666666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.333333333333336%;
  }
  .col-md-8 {
    width: 66.66666666666666%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333333334%;
  }
  .col-md-11 {
    width: 91.66666666666666%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-push-1 {
    left: 8.333333333333332%;
  }
  .col-md-push-2 {
    left: 16.666666666666664%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-4 {
    left: 33.33333333333333%;
  }
  .col-md-push-5 {
    left: 41.66666666666667%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-7 {
    left: 58.333333333333336%;
  }
  .col-md-push-8 {
    left: 66.66666666666666%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-10 {
    left: 83.33333333333334%;
  }
  .col-md-push-11 {
    left: 91.66666666666666%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-pull-1 {
    right: 8.333333333333332%;
  }
  .col-md-pull-2 {
    right: 16.666666666666664%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-4 {
    right: 33.33333333333333%;
  }
  .col-md-pull-5 {
    right: 41.66666666666667%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-7 {
    right: 58.333333333333336%;
  }
  .col-md-pull-8 {
    right: 66.66666666666666%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-10 {
    right: 83.33333333333334%;
  }
  .col-md-pull-11 {
    right: 91.66666666666666%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.333333333333332%;
  }
  .col-md-offset-2 {
    margin-left: 16.666666666666664%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666666666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.333333333333336%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666666666666%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333333334%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666666666666%;
  }
}
4

2 回答 2

1

.col-md-3完全按照应有的方式向左浮动。您有两列总宽度为 <= 100%，它们都向左浮动。在这种情况下，如果没有额外的样式，dom 中的最后一个元素将浮动到第一个元素的左侧，使其看起来向右浮动。

有选项，其中三个是：

  1. 将较大的列浮动到右侧：.col-md-8 {float:right}
  2. 更改文档的结构，使其在col-md-3之前col-md-8
  3. 使用绝对定位定位这两列，然后使用您的.col-md-push-x和col-md-pull-x样式。
于 2013-09-17T13:38:11.727 回答
1

调试浮动问题。我发现概述所有块级元素很有用。这可以通过使用开发人员工具或添加* {border:1pt dotted red;}到 css 来完成。div {border:1pt solid red;}如果太杂乱可以使用。

这对于检查元素的宽度非常有用。例如，一个 100% 宽的向左浮动的元素看起来就像它向右浮动一样。

如果某个元素被推到网页的下方，您可以快速查看是哪个元素导致了问题。

试试这个它可以帮助你解决你的问题。

于 2013-09-16T22:02:35.580 回答