display: inline-block;
是CSS中的布局属性,不会在元素后添加换行符。结果,这些元素可以彼此相邻放置。显示之间的主要区别display: inline;
并display: inline-block;
就是display: inline-block;
还允许我们设置元素的宽度和高度。
我们可以通过添加合适的Bootstrap类来防止内联块div包装。让我们借助示例了解这一点:
示例1:我们必须显示使用适当的引导程序行和列类已布局的多个表。问题在于,如果同一行中有多个表,那么Bootstrap会将该行包装起来,如果不适合内联,则将下一个表推到下一行(如果屏幕很小,就会发生这种情况)。但是我们希望这些表对于所有屏幕尺寸都位于同一行(即,我们不希望将内联块元素换行到下一行)。
方法:为此,我们必须为每个表编写表标签以及称为表响应的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.