Question

您好我的项目有问题我正在尝试将按钮设置为相同尺寸并将它们分开，因为您可以看到它们像三明治一样堆叠。我希望他们在盒子里，但更多地与一个和另一个分开。任何人都有任何想法或建议吗？

.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>

Answer 1

您需要为两个按钮设置固定宽度，并为第一个按钮设置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>

Answer 2

.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>

Answer 3

将此代码放入css文件中，并根据需要调整像素。

.btn {
   margin-bottom: 1px;
}

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

3 个答案: