浏览文档

Bootstrap 清除浮动短代码

Hugo Modules Authors 2023年3月24日 2 分钟阅读 文档 Bootstrap 短代码 Clearfix

通过将内容封装在短代码中，可以快速、容易地清除其中的浮动内容。

赞助

成为我们的资助者或赞助商，以支持我们的工作。

爱发电 GitHub 赞助商 PayPal
本页内容
赞助商
Bootstrap 清除浮动短代码

语法

1{{% bs/clearfix %}}
2FLOATING CONTENT.
3{{% /bs/clearfix %}}

示例

源码
1{{% bootstrap/clearfix %}}
2![Float Start](/images/example.jpg?width=200px#float-start) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla diam, sollicitudin quis auctor ac, dapibus eget nulla. Quisque eleifend libero non arcu dapibus porttitor. Nullam pellentesque dictum velit imperdiet ullamcorper. Aenean tristique neque feugiat aliquet aliquam. In quis sem ut lectus volutpat ultricies non in lacus. Mauris maximus hendrerit velit. In hac habitasse platea dictumst. Nam convallis eros libero, ut auctor nisl fermentum ut. Praesent venenatis diam quis pretium suscipit. Nulla tincidunt elit eget nibh pulvinar, at posuere lectus lacinia. Praesent porttitor, mi tristique rhoncus hendrerit, felis nunc cursus tortor, ac convallis orci orci nec tortor. Quisque feugiat egestas diam, quis facilisis lectus maximus eget. Vivamus a ligula eu mi elementum finibus. Curabitur pellentesque ac lacus vel rutrum. Nulla vel lacus nisi. Maecenas eget sem felis.
3
4![Float End](/images/example.jpg?width=200px#float-end) Proin interdum risus vel orci convallis, vitae ultricies erat euismod. Nulla ultricies mi sem, id semper elit venenatis sit amet. Curabitur ultrices lobortis enim, tristique lacinia arcu accumsan eleifend. Suspendisse nec orci et nisi sagittis gravida. Sed massa diam, egestas sit amet sapien quis, sollicitudin mollis dolor. Cras fringilla sapien ut molestie accumsan. Mauris egestas interdum magna non ultricies.
5{{% /bootstrap/clearfix %}}
结果

Float Start Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla diam, sollicitudin quis auctor ac, dapibus eget nulla. Quisque eleifend libero non arcu dapibus porttitor. Nullam pellentesque dictum velit imperdiet ullamcorper. Aenean tristique neque feugiat aliquet aliquam. In quis sem ut lectus volutpat ultricies non in lacus. Mauris maximus hendrerit velit. In hac habitasse platea dictumst. Nam convallis eros libero, ut auctor nisl fermentum ut. Praesent venenatis diam quis pretium suscipit. Nulla tincidunt elit eget nibh pulvinar, at posuere lectus lacinia. Praesent porttitor, mi tristique rhoncus hendrerit, felis nunc cursus tortor, ac convallis orci orci nec tortor. Quisque feugiat egestas diam, quis facilisis lectus maximus eget. Vivamus a ligula eu mi elementum finibus. Curabitur pellentesque ac lacus vel rutrum. Nulla vel lacus nisi. Maecenas eget sem felis.

Float End Proin interdum risus vel orci convallis, vitae ultricies erat euismod. Nulla ultricies mi sem, id semper elit venenatis sit amet. Curabitur ultrices lobortis enim, tristique lacinia arcu accumsan eleifend. Suspendisse nec orci et nisi sagittis gravida. Sed massa diam, egestas sit amet sapien quis, sollicitudin mollis dolor. Cras fringilla sapien ut molestie accumsan. Mauris egestas interdum magna non ultricies.

配置切换
手风琴