Question

我正在尝试使用迷你网格，即使我的列宽等于100％，第三列仍在包装。我做错了什么？

HTML

<div class="row">
    <div class="col-md-7">Here 1</div>
    <div class="col-md-3">Here 2</div>
    <div class="col-md-2">Here 3</div>
</div>

SASS（请参阅完整SASS的JS小提琴）

$width = 100%;
$max-col = 12;

.row {
    width: $width;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
}

由于

Answer 1

只需关闭几个像素 -

.row {
    width: 100%;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
    margin: -2px;
}

.col-md-3 {
    display: inline-block;
    width: percentage((3 / 12));
    margin: -2px;
}

.col-md-7 {
    display: inline-block;
    width: percentage((7 / 12));
    margin: -2px;
}

Answer 2

问题在于空格，最简单的解决方法是编写你的html内联：

object actorsstarter {
  lazy val logger = play.api.Logger("actorsstarter")
  def main(args: Array[String]) {
     // read config from conf/application.conf of main project
     val remoteConfig = ConfigFactory.load.getConfig("botstarter")

     val system = ActorSystem("application",remoteConfig)
     val path = "akka.tcp://application@127.0.0.1:2553/user"
     ....
     logger.info("Started")
  }
}

这是fiddle。

或者您可以将父级的./activator sjutil/run更改为<div class="row"><div class="bor col-md-7">Here 1</div><div class="bor col-md-3">Here 2</div><div class="bor col-md-2">Here 3</div></div>，并为其子级提供一些字体大小值，即。 font-size

最后的解决方案可能是儿童的负利润（正如其他答案所示）。

另请阅读this question了解详情。

无法获得宽度与网格一起使用

2 个答案: