Twitter Bootstrap CSS：列不填充div [英] Twitter Bootstrap CSS: columns not filling div

问题描述

我理解 container>行> col-size - ＃ css格式创建响应列。我们的网站有一个区域，我们需要在容器内使用定义的列宽，不要使用 container>行> col-size - ＃格式。

I understand the container > row > col-size-# css format for creating responsive columns. There is an area of our site where we need to use defined column widths inside a container and do not use the container > row > col-size-# format.

.special-area{
  width: 300px;
}

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

预期的结果是3列每100px宽并排显示在1行。
相反，我们得到两列并排，第一列下面的第三列。

The expected outcome is 3 columns each 100px wide displayed side by side in 1 row. Instead, we are getting 2 columns side by side and the 3rd column underneath the 1st.

如何并排3列？ >

How can we make 3 columns side by side?

推荐答案

您使用 display：inline-block ，表示这些div话。你知道，一句话，一个空格被计数。您可以使用以下内容折叠空格。

You used display:inline-block, that means those divs are acting like words. And you know, for word, a space is counted. You can use following to collapse spaces.

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

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

这篇关于Twitter Bootstrap CSS：列不填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！