Question

我是Bootstrap的新手，现在我正在使用Bootstrap 4将免费的PSD转换为网页。

在PSD中，导航栏和标语部分之间的上边距空间相当大，大约为150px。

要使用Bootstrap应用边距空间，我使用了间距实用程序类“mt-xl- *”。正如文档中所解释的那样，我们只能达到3rem。但根据设计，这还不够。

所以我想将rem值从'3'增加到更多，所以我可以这样做吗？我是否需要使用Saas进行修改，还是应该采用旧的标准CSS方式直接应用保证金？

header{
	background-image: url('images/background-images/header-background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}

.nav-item{
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	text-decoration: none;
}

#slogan-block p{
	text-align: center;
}

#slogan-block p:first-child{
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	font-size: 45px;
	font-weight: 600;
}

#slogan-block p:nth-child(2){
	font-family: 'Montserrat', sans-serif;
	color: #ffffff;
	font-size: 16px;
}

div.header-controls button{
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 18px;
	height: 50px;
	border-radius: 25px;
}

#ask-for-price-control button{
	background-color: #ffffff;
	color: #d32721;
	border: 0;
}

#watch-video-control button{
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #ffffff;
}

.mt-xl-6{
	margin-top: ($spacer * 6) !important;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="master.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <header class="fluid-container">
		
		<div class="container">
			<nav class="navbar navbar-expand-lg">
				<a class="navbar-brand" href="#">
					<img src="images/logo/logo.png">
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href="#">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">About</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Pricing</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Our Drones</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Our Realizations</a>
						</li>
					</ul>
				</div>
			</nav>
			
			<div class="row">
				<div id="slogan-block" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mt-xl-6">
					<p>Film your event with us!</p>
					<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.<br>Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
				</div>
			</div>
			<div class="row justify-content-center mt-xl-5">
				<div id="ask-for-price-control" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-2 header-controls">
					<button>Ask For Price</button>
				</div>
				<div id="watch-video-control" class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-2 header-controls">
					<button>Watch Video</button>
				</div>
			</div>
		</div>
		
	</header>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

您可以将所有间距助手类增加到您想要的任何数字。最好的方法是自定义SASS代码，因为它可以帮助您使用单行代码添加更多属性：填充的所有变体和所需大小的边距类。这样，您可以增加所有间距属性。

在`__variables.scss`

内定义的默认间距

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
        0: 0,
        1: ($spacer * .25),
        2: ($spacer * .5),
        3: $spacer,
        4: ($spacer * 1.5),
        5: ($spacer * 3)
), $spacers);

要添加新属性，只需添加新的key:value，方法与其他六个属性相同。

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
        6: ($spacer * 4),
        7: ($spacer * 5)
), $spacers);

这样，您可以使用*-6-*和*-6-*类的所有变体，例如mt-6和pt-6。

如何在Bootstrap 4中将边距间隔效用从3rem增加到更多？

1 个答案:

在`__variables.scss`

如何在Bootstrap 4中将边距间隔效用从3rem增加到更多？

1 个答案:

在__variables.scss

在`__variables.scss`