directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

布局您的 Bootstrap 项目的组件和选项,包括包装容器、强大的网格系统、灵活的媒体对象和响应性实用工具类。

Containers

容器是 Bootstrap 中最基本的布局元素,在使用我们的默认网格系统时必需的。选择响应式固定宽度的容器(意味着它max-width在每个断点处的变化)或流体宽度(意味着它100%始终是宽的)。

虽然容器可以嵌套,但大多数布局不需要嵌套容器。

<div class="container">  <!-- Content here --></div>

利用特定于断点的列类进行简单的列调整,而不使用显式编号类,例如.col-sm-6...

<div class="container-fluid">  ...</div>

响应断点

由于 Bootstrap 是首先开发为可移动的,所以我们使用了以下几个媒体查询为我们的布局和接口创建合理的断点。这些断点主要基于最小视口宽度,允许我们随着视口的变化而扩展元素。

等宽列可以分成多行,但存在一个 Safari flexbox 缺陷,如果没有明确的flex-basis或无效的行为,border就可能无法工作。

有两种解决方案已在 Bootstrap 外简化测试用例不过,如果浏览器是最新的,这就不应该是必要的。

<div class="container">  <div class="row">    <div class="col">Column</div>    <div class="col">Column</div>    <div class="w-100"></div>    <div class="col">Column</div>    <div class="col">Column</div>  </div></div>

设置一列宽度

Flexbox 网格列的自动布局还意味着您可以设置一列的宽度并让兄弟列自动调整其大小。您可以使用预定义的网格类(如下所示),网格混合或内联宽度。请注意,无论中央列的宽度如何,其他列都将调整大小。

<div class="container">  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-6">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-5">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div></div>

可变宽度内容

使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。

<div class="container">  <div class="row justify-content-md-center">    <div class="col col-lg-2">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div></div>

等宽多列

通过插入.w-100您希望这些列插入到新行的位置。通过混合.w-100和一些响应显示实用程序...

<div class="row">  <div class="col">col</div>  <div class="col">col</div>  <div class="w-100"></div>  <div class="col">col</div>  <div class="col">col</div></div>

响应类

引导程序的网格包括五个预定义类,用于构建复杂的响应性布局。在您认为合适的额外小、小、中、大或超大设备上自定义列的大小。

所有断点

水平堆

Previous article: Next article: