Как центрировать форму входа в оверлей cas? - PullRequest
Новая
       34

Как центрировать форму входа в оверлей cas?

1 голос
/ 24 апреля 2020

Я новичок в тимелице и хочу настроить свой собственный логин в CAS Overlay. Я прошел обучение:

https://dacurry-tns.github.io/deploying-apereo-cas/ui_develop_update-the-login-view.html

а у моего дома всегда есть предложение слева? они думают, что я должен принести css (cas. css); Если так, что следует изменить и как это сделать? код, используемый для формы входа в систему. html:

https://www.codepile.net/pile/52o3by2a

, а формат:

https://www.codepile.net/pile/GoPnWqyE

enter image description here

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Я не имею никакого представления о 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 lang="en">
<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>
0 голосов
/ 24 апреля 2020

Хм. Он выглядит как шаблон Thymeleaf, который вы используете, включает в себя Bootstrap 4. Это правильно?

Немного трудно понять, как именно получить результаты, которые вы после этого Нет примера кода для просмотра.

Тем не менее, я бы попытался превратить непосредственный дочерний элемент вашего .row элемента (в файле фрагмента входа в систему) в сам Flex-контейнер и центрировать его с помощью одной из утилит Bootstrap 4 flexbox; в частности, вы должны добавить d-flex justify-content-center (то есть псевдонимы Bootstrap для нативных CSS display: flex и 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 здесь

...