亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 cas 覆蓋中居中登錄表單?

如何在 cas 覆蓋中居中登錄表單?

慕妹3146593 2022-07-15 10:00:36
我是 thymeleaf 的新手,我想在 CAS Overlay 中自定義我自己的登錄,我遵循了一個教程:https://dacurry-tns.github.io/deploying-apereo-cas/ui_develop_update-the-login-view.html但是我家總是在左邊有建議?他們認為我應該帶上 css (cas.css);如果是這樣,應該改變什么以及如何做?用于 loginform.html 的代碼是:https://www.codepile.net/pile/52o3by2a布局是:https://www.codepile.net/pile/GoPnWqyE
查看完整描述

2 回答

?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

我對 CAS 沒有任何想法,但您可以使用以下方式對齊您的表格,看看它是否適合您


將類添加form-container到表單的父 div 和


.form-container{

        width: 300px;

        margin: 0 auto;

        float: none;

    }  

.form-container{

        width: 300px;

        margin: 0 auto;

        float: none;

    }  

<!DOCTYPE html>

<html>

<head>

  <title>Form Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>

<body>


<div class="container">


  <div class="form-container">  

    <h3>Vertical (basic) form</h3>

    <form action="/action_page.php">

      <div class="form-group">

        <label for="email">Email:</label>

        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">

      </div>

      <div class="form-group">

        <label for="pwd">Password:</label>

        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">

      </div>

      <div class="checkbox">

        <label><input type="checkbox" name="remember"> Remember me</label>

      </div>

      <button type="submit" class="btn btn-default">Submit</button>

    </form>

  </div>



</div>


</body>

</html>


查看完整回答
反對 回復 2022-07-15
?
白板的微信

TA貢獻1883條經驗 獲得超3個贊

看起來您使用的 Thymeleaf 模板包括 Bootstrap 4。對嗎?


由于沒有可查看的實時代碼示例,因此很難確切地弄清楚如何產生您想要的結果。


也就是說,我會嘗試將您的元素的直接子.row元素(在登錄片段文件中)放入一個 flex 容器本身,并使用 Bootstrap 4 的 flexbox 實用程序之一將其居中;具體來說,您應該添加d-flex justify-content-center(分別是 CSS 本機display: flex和的 Bootstrap 的別名justify-content: center。


所以:


  <main role="main" class="container mt-3 mb-3">

    <div class="row">

      <div class="col-md d-flex justify-content-center">

        <div class="my-content">

          MY CONTENT

        </div>

      </div>

    </div>

  </main>

在此處查看 Codepen


查看完整回答
反對 回復 2022-07-15
  • 2 回答
  • 0 關注
  • 142 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號