Я новичок в тимелице и хочу настроить свой собственный логин в 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

enter image description here

1
Maicoly Morocho 24 Апр 2020 в 04:05

2 ответа

Я не имею никакого представления о CAS, но вы можете выровнять свою форму, используя следующий способ, чтобы увидеть, работает ли он для вас

Добавьте class 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
Rahul 24 Апр 2020 в 01:47

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

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

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

0
Donkey Shame 24 Апр 2020 в 02:04