display: inline-block;
是 CSS 中的布局属性,不会在元素后添加换行符。因此,元素可以彼此相邻。 display的主要区别display: inline;
并display: inline-block;
就是, display: inline-block;
还允许我们设置元素的宽度和高度。
我们可以通过添加合适的 Bootstrap 类来防止内联块 div 被包装。让我们通过一个例子来理解这一点:
示例 1:我们必须显示使用合适的引导行和列类布置的多个表。问题在于,如果同一行中有多个表,则 Bootstrap 会将该行包装起来,并将下一个表推到下一行,如果它不适合内联(如果屏幕尺寸很小,就会发生这种情况)。但是我们希望这些表格对于所有屏幕尺寸都在同一行上(即我们不希望内联块元素环绕到下一行)。
方法:为此,我们必须为每个表编写 table 标记以及名为 table-responsive 的 Bootstrap 类。此类使所有表格具有响应性,以便它们对于所有类型的屏幕(来自 xs-lg)都位于同一位置,并且如果屏幕尺寸小以适合表格,表格会自动获得水平滚动条,用户可以通过向右滚动查看表格的额外内容。这也避免了表格的重叠并使页面看起来干净。
句法:
例子:
Prevent inline-block
divs from wrapping
header1
header2
header3
header4
data1
data2
data3
data4
data1
data2
data3
data4
header1
header2
header3
header4
data1
data2
data3
data4
header1
header2
header3
header4
data1
data2
data3
data4
header1
header2
header3
header4
data1
data2
data3
data4
header1
header2
header3
header4
data1
data2
data3
data4
需要记住的一件重要事情是,响应式表格使用overflow-y: hidden
,它会剪掉超出表格底部或顶部边缘的任何内容。所以,如果你的表格很大,可以超出屏幕底部,那么最好在
The white-space Property
white-space: nowrap:
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.
white-space: normal:
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.