bootstrap网格系统

最新推荐文章于 2023-09-05 11:21:09 发布

转载最新推荐文章于 2023-09-05 11:21:09 发布 · 446 阅读

bootstrap 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Bootstrap框架中的网格系统原理及使用方法，包括如何通过不同类实现响应式布局、列偏移及列排列调整等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）原理

实质就是将容器12等分

（2）使用

1.基本结构

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-8">.col-md-3</div>
  </div>
</div>

2.注意
<1>数据行.row必须包含在容器.container之中

<2>在数据行.row中可以添加列，但是列数之和不能超过12

（3）列偏移col-md-offset-*

1.作用

有时候不希望2列并在一起，这个时候就可以使用列偏移使他们分开

2.使用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列偏移</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<h4>列向右移动四列的间距</h4>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    <div class="col-md-2">.col-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-5 col-md-offset-3">列向右移动3列的间距</div>
  </div>
</div>

</body>
</html>

（4）列排列col-md-pull-* col-md-push-*

1.作用

有时需要改变列的位置，那么pull就是往左拉，push就是往右推

2.使用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>列排序</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="common.css">
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>
</div>
</body>
</html>