©
이 문서에서는PHP 중국어 웹사이트 매뉴얼풀어 주다
Bootstrap 媒体对象的文档和示例,构建博客评论,推文等高度重复的组件。
媒体对象有助于建立复杂的和重复的成分,其中一些媒体被定位旁边内容不环绕,所述媒体。另外,Flexbox 只需要两个必需的类。
以下是单个媒体对象的示例。只需要两个类 - 包装.media
和.media-body
你的内容。可选的填充和边距可以通过间隔工具进行控制。
![]()
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Internet Explorer 的10-11不会使内联元素类似的链接或图片(或::before
和::after
伪元素)作为柔性物品。唯一的解决方法是设置一个非内联display
的值(例如,block
,inline-block
,或flex
)。我们建议使用.d-flex
我们的显示实用程序之一作为简单的修复。
媒体对象可以无限嵌套,但我们建议您在某个时候停下来。嵌套.media
在.media-body
父媒体对象中的地方。
![]()
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
媒体对象中的媒体可以与 Flexbox 实用程序一起对齐到内容的顶部(默认),中间或结尾.media-body
。
![]()
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
![]()
Center-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
![]()
Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
通过修改HTML本身或通过添加一些自定义 Flexbox CSS 来设置order
属性(以您选择的整数)更改媒体对象中内容的顺序。
Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
由于媒体对象的结构要求非常少,您还可以在列表 HTML 元素上使用这些类。在你的
或
,添加.list-unstyled
删除任何浏览器的默认列表样式,然后申请.media
你的。与往常一样,在需要的地方使用间隔工具进行微调。