Использование конструктора форм с пользовательским CSS и нужна помощь в изменении выравнивания кнопок - PullRequest
Новая
       0

Использование конструктора форм с пользовательским CSS и нужна помощь в изменении выравнивания кнопок

0 голосов
/ 16 января 2019

Я использую конструктор форм для создания многошаговой формы и вставляю свой собственный CSS для изменения макета формы. Не могу ухватиться за кнопки «следующий» и «предыдущий».

Я использую «Легкие формы» для создания пользовательских многошаговых форм с логическими условиями. Если вы не знакомы с Easy Forms, это в основном перетаскивание с возможностью вставлять фрагменты HTML и устанавливать классы контейнера CSS для каждого вопроса, который вы задаете в форме. Затем у вас есть доступ к коду CSS, чтобы создать собственную «тему» ​​для формы.

У меня есть доступ к кнопке «Отправить» во время процесса перетаскивания, поэтому я смог установить класс CSS для этого, и в моем CSS я центрировал его, используя смещения и «col -...» , Тем не менее, я не могу ухватиться за кнопки «следующий» и «предыдущий», так как это многошаговая форма с несколькими разрывами страниц. В Easy Forms я не могу получить доступ или редактировать кнопки «Следующая» и «Предыдущая» (насколько я могу их различить), поэтому я не могу назначить им класс CSS.

Я опубликовал форму и посмотрел HTML-код того, что Easy Forms назначает следующей и предыдущей кнопкам.

Вот как это выглядит в HTML-коде: 

<button type="button" class="btn btn-primary next">Next</button>

У меня нет доступа к html-коду, чтобы просто добавить туда центрированный div, поэтому мне нужно как-то зацепить эти кнопки через css.

Вот некоторые из моих попыток 

.btn {
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1) !important;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(255,255,255,0.1);
    padding: 16px 32px;
    margin: 0 auto;
}
.btn-primary {
    background-color: rgb(10,31,46);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.07),0 1px 1px rgba(10,13,25,0.5);
    text-align: center;
    margin: auto;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #163348; !important;
    background-color: #163348 !important;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.07),0 1px 1px rgba(10,13,25,0.5) !important;
    outline: 2 !important;
}

.previous {
    text-align:center; 
    margin: auto;
}

.next {
    text-align: center;
    margin: auto;
}

Центрированные кнопки «Следующая» и «Предыдущая»

1 Ответ

0 голосов
/ 16 января 2019

Добавлено три разных расположения кнопок с классами Bootstrap Flex. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using a form builder with custom CSS and need help changing the button alignment</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.btns button {
	margin: 0 20px;
}
</style>
</head>

<body>
<div class="container">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <div class="btns d-flex justify-content-center">
      <button type="button" class="btn btn-primary previous">Prev</button>
      <button type="button" class="btn btn-primary next">Next</button>
    </div>
    <div class="btns d-flex justify-content-between">
      <button type="button" class="btn btn-primary previous">Prev</button>
      <button type="button" class="btn btn-primary next">Next</button>
    </div>
    <div class="btns d-flex justify-content-around">
      <button type="button" class="btn btn-primary previous">Prev</button>
      <button type="button" class="btn btn-primary next">Next</button>
    </div>
  </form>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...