Question

我有两个容器，每个容器包含以页面上的图标和文本为中心的行。您可以在此处查看此示例：http://laurelnatale.me/newport/index.html

除非您使用的是FireFox。然后行不跟随跨度并且位于页面的最左侧。我已经摆弄了一段时间，现在尝试推，拉，不同的旁边，没有任何工作，好像它没有读除其他任何东西，但它们应该在容器中。

以下是代码：

<div class="container">

<div class=" row minipush">

<div class="span2 offset2">
 <div class="bigIcon"><a class="skylink" href="skills.html">Sk</a></div>
  <div class="hitext">skills</div>
  </div>

<div class="span4">
<div class="bigIcon"><a class="skylink" href="#">Pr</a></div>
<div class="hitext">projects</div>
</div>

<div class="span2 push2">
<div class="bigIcon"><a class="skylink" href="#">Tk</a></div>
<div class="hitext">toolkit</div>
</div>

</div><!--row end-->
</div><!--container end-->

<div class="container">
<div class=" row minipush2">

<div class="span3 offset4">
<div class="email">
<img class="emailicon" src="images/email.png" alt="email Laurel Natale">
<div class="hitext mail">email</div>
</div>

</div>

<div class="span3 pull2">
<div class="twitter">
<img class="twittericon" src="images/twitter.png" alt="Follow Laurel Natale on Twitter">  
<div class="hitext tweet">twitter</div>
</div>

</div>

</div><!--row end-->

</div><!--container end-->

这是CSS：

.minipush2 {
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-top: 5%;

    @include breakpoint(baby-bear) {
      padding-left: 15%;
      margin-top: 10%;
    }

}

.hitext {
  padding-bottom: 1em;
}

.mail {
  margin-left: - 12em;

  @include breakpoint(mama-bear) {
    margin-left: -8em;
  }

  @include breakpoint(baby-bear) {
    margin-left: 1em;
  }

}

.tweet {
  margin-left: - 12em;

  @include breakpoint(mama-bear) {
    margin-left: -8em;
  }

  @include breakpoint(baby-bear) {
    margin-left: 1em;
  }
}

使用bootstrap，在Firefox中布局很糟糕

0 个答案: