html - 推特 Bootstrap CSS : columns not filling div

Question

我了解用于创建响应列的 container > row > col-size-# css 格式。我们网站的某个区域需要在容器内使用定义的列宽，并且不使用 container > row > col-size-# 格式。

.special-area{
  width: 300px;
}

.special-area .one-third{
  width: 100px;
  padding: 0px;
  margin 0px;
  display: inline-block;
}

预期结果是在 1 行中并排显示 3 列，每列 100 像素宽。相反，我们得到并排的 2 列和第 1 列下方的第 3 列。

我们如何并排放置 3 列？

Answer 1

您使用了 display:inline-block，这意味着这些 div 就像文字一样。你知道，对于单词，空格是计算在内的。您可以使用以下来折叠空间。

.special-area{
    white-space: nowrap;
}

.special-area .one-third{
    white-space: normal;
}