主页 / 问题 / 1007996
Accepted
Vitaly M.
Asked:2020-07-30 01:19:24 +0000 UTC2020-07-30 01:19:24 +0000 UTC

如何将 JSP 页面格式化到左侧？

  • 772

这是我的页面。它将中心的内容对齐到左侧，我希望内容的放置和对齐方式<div class="container h-100 text-left">...</div>在浏览器的左侧......

我该怎么做？

<html>
<head>

    <%--   For Bootstrap--%>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <%--  End for bootstrap  --%>

    <title>Hellow World</title>
</head>

<body>
<div class="container h-100 text-left">
    <div class="py-5 text-left">
        <h2>${message}</h2>
        <p class="lead">
            <c:out value="${message.toString()}"/>
        </p>
    </div>
    <div class="row">
        <form id="settingsForm" method="post" action="update">
            <div class="order-md-1" id="settingsDiv">
...
            </div>
        </form>
    </div>
</div>

<%--For bootstrap--%>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<%--end for bootstrap--%>
</body>
</html>
php

1 个回答

  1. Best Answer

    代替container-> container-fluid吗？

    /* demo */

.redcolor {
  background-color: red
  
}

/* // */
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container-fluid redcolor h-100 text-left">
    <div class="py-5 text-left">
        <h2>${message}</h2>
        <p class="lead">
            <c:out value="${message.toString()}"/>
        </p>
    </div>
    <div class="row">
        <form id="settingsForm" method="post" action="update">
            <div class="order-md-1" id="settingsDiv">

            </div>
        </form>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    • 0

相关问题