Clearfix

2024年8月29日 | 1 分钟阅读

Clearfix 用于通过将 .clearfix 添加到父元素来轻松清除浮动。它使用 Nicolas Gallagher 推广的微型 clearfix。它也可以用作mixin。

语法

如何在mixin中使用

// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// Usage as a mixin
.element {
  @include clearfix;
}

如何使用 Clearfix

让我们举一个例子来看看如何使用clearfix。如果没有 clearfix，包装 div 就不会环绕按钮，这会导致布局中断。

语法

<div class="bg-info clearfix">
  <button class="btn btn-secondary float-left">Example Button floated left</button>
  <button class="btn btn-secondary float-right">Example Button floated right</button>
</div>

下一个主题Bootstrap 关闭图标

← 上一个下一个 →

相关帖子

Bootstrap 定位
Positions Bootstrap position 实用程序用于快速将组件放置在正常文档流之外。有几个固定和粘性位置类可用。固定顶部它用于将元素定位在视口的顶部，从边缘到边缘。你可以...
阅读1分钟
Bootstrap 尺寸
尺寸调整它用于调整元素的大小。通过使用尺寸调整实用程序，您可以使用宽度和高度实用程序轻松地使元素（相对于其父元素）宽或高。默认情况下包括对 25%、50%、75% 和 100% 的支持。宽度和高度实用程序...
阅读1分钟
如何在 Bootstrap 中更改导航栏颜色
? 有两种方法可以在Bootstrap中更改导航栏颜色：方法1：众所周知，我们在Bootstrap中内置了类，每个类都在文档中定义。因此，我们可以通过将类名更改为适当的...
阅读 4 分钟
Bootstrap 和 WordPress 之间的区别
什么是 Bootstrap？ Bootstrap 是 Web 开发中最著名的 CSS 框架之一。它用于设计和创建具有出色设计和完全响应能力的网站。 Bootstrap 仅用于前端开发，因此开发人员不需要太多的 HTML 和...
阅读 3 分钟
Bootstrap3 页脚
在本文中，我们将借助 . 创建一个页脚。在本文的开头，我们将学习 Bootstrap 和 Bootstrap 3 的一些基础知识。之后，我们将借助 . 的各种示例来理解这个概念。你是什么...
18 分钟阅读
Display 属性
显示属性以下是一些显示实用程序的列表：.d-block display utility: 此实用程序用于将元素的 display 属性设置为 block。语法： <span class="d-block bg-primary">Block</span> .d-inline utility: 此实用程序用于将元素的 display 属性设置为 inline。语法： <div class="d-inline bg-success">Inline</div> <div class="d-inline bg-success">Inline</div> .d-inline-block: 使用此实用程序...
阅读1分钟
Bootstrap 中的响应式图像与示例
在本教程中，我们将通过示例学习如何在 Bootstrap 中制作响应式图片。Bootstrap 提供了各种图片类来改善其外观并使其响应式。尝试使图片响应式意味着它需要根据其父元素进行缩放...
阅读 2 分钟
Bootstrap Datepicker 获取日期更改事件
在本节中，我们将学习使用Bootstrap datepicker在事件发生更改时获取日期及其格式。有时我们的项目需要选择日期的选项。如果我们想启用输入字段以输入日期，则datepicker将...
阅读 2 分钟
使用 Bootstrap Typeahead JS 示例的动态自动完成搜索
在本节中，我们将使用 Bootstrap Typeahead JS，以便我们可以执行动态自动完成搜索。 Typeahead 也可以称为自动建议或自动完成。它是一种用于语言预测的工具。许多人都在使用这个工具...
阅读 2 分钟
Bootstrap 中的添加到购物车按钮
在本文中，我们将学习如何在 bootstrap 中包含“添加到购物车按钮”。为此，我们将使用各种带有 shopping-cart 的 bootstrap 添加到购物车按钮设计和模板。首先，我们将学习 Bootstrap、bootstrap 按钮的一些基础知识，添加...
阅读 6 分钟

Clearfix

语法

如何在mixin中使用

如何使用 Clearfix

语法

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Clearfix

语法

如何在mixin中使用

如何使用 Clearfix

语法

相关帖子

Bootstrap 定位

Bootstrap 尺寸

如何在 Bootstrap 中更改导航栏颜色

Bootstrap 和 WordPress 之间的区别

Bootstrap3 页脚

Display 属性

Bootstrap 中的响应式图像与示例

Bootstrap Datepicker 获取日期更改事件

使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

Bootstrap 中的添加到购物车按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器