Bootstrap中元素的padding重写（以超大屏幕Jumbotron为例）

最新推荐文章于 2023-10-09 17:50:27 发布

法如果日ugri

最新推荐文章于 2023-10-09 17:50:27 发布

阅读量7.7k

点赞数 4

分类专栏： Bootstrap Web前端文章标签： Bootstrap Web前端框架

本文链接：https://blog.csdn.net/huaxiaowangshu/article/details/51052401

版权

Bootstrap Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap可以说是前端第一框架，丰富的插件、跨移动和PC平台等优势使得Bootstrap很受前端开发者的青睐。笔者也是刚接触Bootstrap不久，对Bootstrap简单的代码实现强大的功能很是喜爱。但自己在写Bootstrap代码的过程中发现Bootstrap的组件插件很多都是需要重写的，否则在页面布局显示方面是达不到自己想要的效果的。其中Bootstrap的组件插件的样式经常要重写的莫过于pading、margin等了，这篇文章以重写Jumbotron的padding（其他的类似都是用覆盖的方法改变样式）为例，说说如何用覆盖的方法重写Bootstrap的一些组件的属性值。

先看一段代码：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap超大屏幕（Jumbotron）</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="jumbotron">
      <h1>Show</h1>
      <p>This is a Jumbotron</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         learn more</a>
      </p>
   </div>
</div>

</body>
</html>

运行后结果是这样的：

可以看到，文字的四周存在很多的“空白处”，有时这样的效果是我们不想要的。如何减少或去除这些所谓的“空白处”，其实很简单，我们只要修改一下Jumbotron的padding（填充）就行。问题是在哪修改和如何修改padding？

Just follow me……

我们在jumbotron的<div>的class里jumbotron的前面（因为这样级别能高于“jumbotron“）随便加上一个类名，如这里写个h，这样就能实现第一步了。然后我们再在<style></style>里写上自己想要的padding值，即可完成覆盖操作。代码如下：

<!DOCTYPE html>
<html>
<head>
   <title>bootstrap</title>
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="bootstrap/jq/jquery-2.1.4.min.js"></script>
   <script src="bootstrap/js/bootstrap.min.js"></script>
   <style type="text/css">
     .h.jumbotron{
        padding: 4px;
     }
   </style>
</head>
<body>
<div class="container">
   <div class="h jumbotron">
      <h1>show</h1>
      <p>This is a Jumbotron</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         learn more</a>
      </p>
   </div>
</div>
</body>
</html>