ブートストラップCSSを使用したボタンの整列

私は、入金、引き出しなど私のオンラインバンク用のボタンがいくつかあります。最初の行に3つのボタンがあり、2番目の行に4つのボタンが必要ですが、これまでのところ、すべてのボタンが横断し、いくつかのボタンは互いに重なっています。私はブートストラップを使用してボタンのスタイルを設定していますが、どこに配置するのかわかりません。ここに私のコードは、これまでのところです：ブートストラップCSSを使用したボタンの整列

家庭page.jsp

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="CSS/home-page.css" > 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <title>Home</title> 
</head> 
<body> 
    <p id="welcome">Welcome</p> 
    <p>Today's Date: <%= new java.util.Date() %></p> 

    <form name = "Deposit" action="deposit" id="deposit"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Deposit</button> 
     </p> 
    </form> 

    <form name = "Withdraw" action="withdraw" id="withdraw"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Withdraw</button> 
     </p> 
    </form> 

    <form name = "OpenAccount" action="open-account.jsp" id="openaccount"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Open Account</button> 
     </p> 
    </form> 

    <form name = "BalanceInquiry" action="balance.jsp" id="balance"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Balance Inquiry</button> 
     </p> 
    </form> 

    <form name = "Loan" action="loan.jsp" id="loan"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Loan Approval</button> 
     </p> 
    </form> 

    <form name = "Transfer" action="transfer.jsp" id="transfer"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Transfer</button> 
     </p> 
    </form> 

    <form name = "Transaction" action="transaction-history.jsp" id="transaction"> 
     <p> 
      <button type="submit" class="btn btn-primary btn-lg">Transaction History</button> 
     </p> 
    </form> 

</body> 
</html>

CSSページ：

body { 
    background-color: lightgray; 
} 

#welcome { 
    margin-top: 10px; 
    font-size: 45px; 
    font-family: cursive; 
    text-align: center; 
} 

p { 
    font-size: 15px; 
    font-family: cursive; 
    margin-top: -45px; 
} 

.btn btn-primary btn-lg{ 
    float: left; 
}

出典

2016-11-01 Nasim Ahmed

行と列を使用してください。だから：

<div class="row"> 

    <div class="col-md-4"> 
     <form name = "Deposit" action="deposit" id="deposit"> 
      <p> 
       <button type="submit" class="btn btn-primary btn-lg">Deposit</button> 
      </p> 
     </form> 
    </div> 

    <div class="col-md-4"> 
     <form name = "Withdraw" action="withdraw" id="withdraw"> 
      <p> 
       <button type="submit" class="btn btn-primary btn-lg">Withdraw</button> 
      </p> 
     </form> 
    </div> 

    <div class="col-md-4"> 
     <form name = "OpenAccount" action="open-account.jsp" id="openaccount"> 
      <p> 
       <button type="submit" class="btn btn-primary btn-lg">Open Account</button> 
      </p> 
     </form> 
    </div> 

</div>

出典

2016-11-01 21:00:30

ありがとう私は行と列を完全に忘れてしまった –

ブートストラップCSSを使用したボタンの整列

答えて

関連する問題