Question

当我使用以下代码时，如何确保按钮之间有间距

<div class="container">
   <div class="jumbotron">
    <button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
    <br><br>         
    <span ng-repeat="genre in genres"> 
        <button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>            
    </span>            

</div>

Answer 1

您可以在此处使用Bootstrap间距-> https://getbootstrap.com/docs/4.0/utilities/spacing/

此示例使用类“ mr-2”为按钮添加右边距

<button id="button1" class="btn btn-primary mr-2">Button 1</button>
<button id="button2" class="btn btn-primary mr-2">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>

Answer 2

使用css属性边距

button { margin: 5px 5px 5px 5px } //change the value to see the effect and choose for yourself which value to keep

保证金：保证金最高 保证金权利 保证金底部 保证金保留;

Answer 3

在按钮上设置右边距：

<div class="container">
   <div class="jumbotron">
    <button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)" style="margin-right: 10px;">{{char}}</button>
    <br><br>         
    <span ng-repeat="genre in genres"> 
        <button class="btn btn-xs" ng-click="filterByGenre(genre)" style="margin-right: 10px;">{{genre}}</button>            
    </span>            
</div>

希望，这是你正在寻找的。

Answer 4

＆＃13;

.capsule{
	 padding: 0 30px;
	}

＆＃13;

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
	   <div class="jumbotron">
		<span class="col-xs-4"> &nbsp; </span>
			<span class="capsule col-xs-2">
				<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>        
			</span>
			<span class="capsule col-xs-2" ng-repeat="genre in genres"> 
				<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>            
			</span>            

		</div>

＆＃13;

我添加了一个空的跨度来将巨型中心放在屏幕中，还添加了＃34; capsule＆＃34;跨越以获得按钮之间的空间。

希望它有所帮助！

Answer 5

'btn-toolbar'一举完成了这个伎俩。不需要手动css'ing

<div class="btn-toolbar">
    <button id="button1" class="btn btn-primary">Button 1</button>
    <button id="button2" class="btn btn-primary">Button 2</button>
    <button id="button3" class="btn btn-primary">Button 3</button>
</div>

Bootstrap按钮之间的间距

5 个答案: