为什么margin-top不应该用在Bootstrap 4中?

时间:2018-04-03 10:34:12

标签: twitter-bootstrap bootstrap-4

好吧,这可能是一个非常有趣而又愚蠢的问题,即使我在询问时也会想到它。

我想我在Lynda.com的一个课程中读/听说Bootstrap 4 与margin-top 不兼容。我把它读到的地方很困惑。而且,这句话使我的网络职业生涯不再使用我在使用Bootstrap时使用保证金。

每当我需要在其后面的元素上使用margin-top时,我更喜欢在所有组件上使用margin-bottom。现在,我不知道这个理论有多正确。

因此,我想知道这个理论是否属实。作为初学者,质疑你所遇到的每一个困惑并找到问题的核心是件好事。而不是避免它,永远不会发现它。



<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<div class="container-fluid">
<div class="row">
<!-- I need margin top on second column, but I'm using it on first column with bottom margin right now. It works and solves the problem. But the question of why always remain. -->
  <div class="col-12 mb-5"></div>
  <div class="col-12">I need margin top here. But I'm going to put it in above column using margin-bottom :D</div>
  
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

经过2-3周的搜索,我终于找到了我想要的答案。而且,让我告诉你,我没想到这就是答案。

Bootstrap 4使用Reboot重置CSS样式表。

  

重新启动会做一些不同的事情。它基于Normalize。它   避免margin-top,包含CSS继承值,使用rem单元   非常重要,并且使用本机字体堆栈来获得最佳文本   渲染。

View Full Article Here

而且,似乎这就是我发现的答案!我希望有些看起来很晚的人能够理解这是一个设计决定,我现在很乐意遵循这个决定!而且,你也可以做出决定。

相关问题