极客教程Bootstrap 4流体布局
Bootstrap是一个免费和开源的工具集，用于创建响应式网站和网络应用。这是最流行的HTML、CSS和JavaScript框架，用于开发响应式网站。它解决了很多我们曾经遇到的问题，其中之一就是跨浏览器的兼容性问题。
下面这个类用于流体布局。它在所有断点处都设置了100%的宽度。
语法:
.container-fluid
Bootstrap流体布局：在Bootstrap中，你可以利用”.container-fluid “类来制作流体格式，在所有小工具上使用100%的视口宽度。类”.container-fluid “本质上是应用 “width:100%”，而不是针对不同视口尺寸的各种宽度。在任何情况下，设计将是响应式的，你可以明显地利用框架类。
例子：这个例子将使用Bootstrap 4制作一个覆盖屏幕100%宽度的流体设计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fluid Layout</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-expand-md
navbar-dark bg-success mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">GeeksforGeeks</a>
<button type="button"
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active"></a>
<a href="#" class="nav-item nav-link">Courses</a>
<a href="#" class="nav-item nav-link">DSA</a>
<a href="#" class="nav-item nav-link">Articles</a>
<a href="#" class="nav-item nav-link">Jobs</a>
<a href="#" class="nav-item nav-link">Student</a>
<a href="#" class="nav-item nav-link">Tutorials</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1>Get Hired With GeeksforGeeks and
<strong>Win Exciting Rewards!</strong>
</h1>
<p class="lead">
Imagine a situation of visiting a game parlor or
adventure park, having ultimate fun there, and
coming back home without paying a single penny there
and in fact, receiving some exciting rewards or
cash benefits from them.
</p>
<p><a href="#"
target="_blank"
class="btn btn-success btn-lg">
Register here
</a>
</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Basic Concepts For Data Science</h2>
<p>
Data Scientist is one of the most lucrative
career options that offers immense
job satisfaction,insanely high salary, global
recognition, and amazing growth
opportunities.
</p>
<p><a href="#" class="btn btn-success">
Read More »</a>
</p>
</div>
<div class="col-md-4">
<h2>Stock Market APIs For Developers</h2>
<p>
Stock Market is all about the exchange of
stocks (also pronounced as Shares)
between various buyers and sellers.
Since stocks of variable prices are prone
</p>
<p><a href="#"
class="btn btn-success">
Read More »</a>
</p>
</div>
<div class="col-md-4">
<h2>Is Quick Sort Algorithm Adaptive or not</h2>
<p>
Pre-Requisites: Quick Sort Algorithm Adaptiveness
in the Quick Sort Algorithm refers to the decision
that if we are given an array that is already
sorted
</p>
<p><a href="#"
class="btn btn-success">
Read More »</a>
</p>
</div>
</div>
</div>
</body>
</html>
输出:
