自定义引导按钮

Question

我想让引导按钮大于btn-lg ......

继承我当前的代码..

HTML

当我使用填充向锚标签类添加一个新类时，它看起来很奇怪..

但这就是我希望它看起来像...（这张照片是在锚标记放入代码之前，它只是与btn类一起使用。）

提前谢谢。

Answer 1

我尝试了同样的事情，但它没有任何问题。 我希望以下代码链接可以帮助您更好地理解。

＆＃13;

＆＃13;

body {
  padding: 10px;
}

.container .btn-outline-success {
  border: 1px solid #777;
  padding: 0 20px;
  min-width: 130px;
  height: 60px;
  line-height: 60px;
  margin-right: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <a class="btn btn-outline-success btn-lg" href="coderesource.html" role="button">HTML</a>
  <a class="btn btn-outline-success btn-lg" href="coderesource.html" role="button">CSS</a>
  <a class="btn btn-outline-success btn-lg" href="coderesource.html" role="button">Javascript</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题的原因不是将任何类添加到锚标记中，而是可能是您在锚点周围使用的容器。

我会尝试在一行中使用flexbox和.justify-content-between设置来达到预期的结果。这样，按钮在它们之间将具有相等的水平空间并填充该行。使用Bootstrap 4的内置padding classes也可以为按钮添加额外的填充。（或者您也可以创建自定义类宽度填充，但不要忘记!important。）工作示例：< / p>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
	<div class="row">
		<div class="col-12 d-flex justify-content-between">
			<a href="#" class="btn btn-lg btn-outline-success px-5 py-3">HTML</a>
			<a href="#" class="btn btn-lg btn-outline-success px-5 py-3">CSS</a>
			<a href="#" class="btn btn-lg btn-outline-success px-5 py-3">JavaScript</a>
		</div>
	</div>
</div>