Question

我的网上银行有几个按钮，例如存款，取款等。我希望第一行有3个按钮，第二行有4个按钮，但我不知道怎么办？到目前为止，所有按钮都经过，有些按钮相互重叠。我正在使用自举来设置按钮的样式，但我不知道在哪里对齐。到目前为止，这是我的代码：

家庭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;
}

Answer 1

确保使用行和列。所以：

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

使用bootstrap css对齐按钮

1 个答案: