Bootstrap 3个单独的按钮大小相同？

你好我的项目有问题我正在尝试使按钮尺寸相同，并将它们分开一点，因为你可以看到它们像三明治一样堆叠。我希望他们在盒子里，但更多地与其他人分开。任何人有任何想法或建议？Bootstrap 3个单独的按钮大小相同？

.knappar 
 
{ 
 
padding-top: 10px; 
 
padding-bottom: 20px; 
 

 

 
} 
 

 
.welcome h1 
 
{ 
 
color: white; 
 
text-align: center; 
 
margin-top: 10%; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
font-family: 'Pacifico', cursive; 
 
} 
 

 
.box { 
 
    border-radius: 25px; 
 
    background-color: white; 
 
    border: 2px solid #8AC007; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 

 

 
    <title>Project Fairy Tales</title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 

 
</head> 
 
<body> 
 
    <div class="welcome"> 
 
    <h1>Welcome to Project Fairy Tales</h1> 
 
    </div> 
 

 
<div class="box"> 
 
<div class="knappar"> 
 
<a href="bib.html"><button type="button" id="rov" class="btn btn-primary btn-lg">Ditt bibliotek</button></a> 
 
<a href="store.html"><button type="button" id="rov2" class="btn btn-primary btn-lg">Affär</button></a> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-10-05 Edgar Axe

你将需要设置一个固定的宽度为按钮和margin-bottom为第一个按钮两者。

.knappar { 
 
    padding-top: 10px; 
 
    padding-bottom: 20px; 
 
} 
 
.welcome h1 { 
 
    color: white; 
 
    text-align: center; 
 
    margin-top: 10%; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
    font-family: 'Pacifico', cursive; 
 
} 
 
.box { 
 
    border-radius: 25px; 
 
    background-color: white; 
 
    border: 2px solid #8AC007; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
/* Added code */ 
 
#rov, 
 
#rov2 { 
 
    width: 150px; 
 
} 
 
#rov { 
 
    margin-bottom: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 

 

 
    <title>Project Fairy Tales</title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 

 
</head> 
 

 
<body> 
 
    <div class="welcome"> 
 
    <h1>Welcome to Project Fairy Tales</h1> 
 
    </div> 
 

 
    <div class="box"> 
 
    <div class="knappar"> 
 
     <a href="bib.html"> 
 
     <button type="button" id="rov" class="btn btn-primary btn-lg">Ditt bibliotek</button> 
 
     </a> 
 
     <a href="store.html"> 
 
     <button type="button" id="rov2" class="btn btn-primary btn-lg">Affär</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2015-10-05 13:09:47

超级谢谢你的帮助Manoj！ –

不是问题，埃德加！ :) –

.knappar 
 
{ 
 
padding-top: 10px; 
 
padding-bottom: 20px; 
 
text-align: center; 
 

 
} 
 
    
 
    .knappar .btn { min-width: 130px;} 
 
    .knappar .btn-top { border-radius: 4px 4px 0 0; border-bottom:0;} 
 
.knappar .btn-bottom { border-radius: 0px 0px 4px 4px; border-top:0;} 
 

 
.welcome h1 
 
{ 
 
color: white; 
 
text-align: center; 
 
margin-top: 10%; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
font-family: 'Pacifico', cursive; 
 
} 
 

 
.box { 
 
    border-radius: 25px; 
 
    background-color: white; 
 
    border: 2px solid #8AC007; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 

 

 
    <title>Project Fairy Tales</title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 

 
</head> 
 
<body> 
 
    <div class="welcome"> 
 
    <h1>Welcome to Project Fairy Tales</h1> 
 
    </div> 
 

 
<div class="box"> 
 
<div class="knappar"> 
 
<a href="bib.html"><button type="button" id="rov" class="btn btn-primary btn-lg btn-top">Ditt bibliotek</button></a> 
 
<a href="store.html"><button type="button" id="rov2" class="btn btn-primary btn-lg btn-bottom">Affär</button></a> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-10-05 13:10:39 vivekkupadhyay

谢谢vivek！ –

很高兴帮助@EdgarAxe – vivekkupadhyay

将这个代码在你的CSS文件，并根据您的需要调整像素。

.btn { 
    margin-bottom: 1px; 
}

来源

2015-10-05 13:22:15

谢谢您的建议！ –

Bootstrap 3个单独的按钮大小相同？

回答

相关问题