Выровняйте три деления по горизонтали - PullRequest
0 голосов
/ 04 апреля 2019
[Button 1] ["OR"] [Button]

Как выровнять 3 деления, первое деление содержит кнопку, второе деление содержит абзац, 3 деление содержит список с кнопкой внутри.

<div class="col-md-12">
  <div style="width: 50%;padding: 0;margin: 0">
    <button type="submit" style="width: 90% !important;  margin: 20px auto !important;"><p class="register-text">Register</p></button>
  </div>
  <div class="col-md-2">
    <p style="padding-top: 15px">OR</p>
  </div>
  <div class="eauth" style="width: 50%;padding: 0;margin: 0" id="w0">
    <ul class="eauth-list">
      <button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button>
    </ul>
  </div>
</div>

Демонстрация Fiddle

Ответы [ 4 ]

0 голосов
/ 04 апреля 2019

Взгляните на ДЕМО-КОД , я удалил лишние HTML-теги

0 голосов
/ 04 апреля 2019

если вы используете загрузчик 4, добавьте row класс к родительскому классу

.row p {
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row align-items-center">
  <div class="col-md-5" style="">
    <button type="submit" style="width: 90% !important;  margin: 20px auto !important;"><p class="register-text">Register</p></button>
  </div>
  <div class="col-md-2">
    <p style="">OR</p>
  </div>
  <div class="col-md-5" class="eauth" style="" id="w0">
    <ul class="list-unstyled">
      <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
      <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
       <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
    </ul>

  </div>
</div>
0 голосов
/ 04 апреля 2019

Вы можете попробовать этот код здесь:

Если вы используете начальную загрузку, включите загрузочный CSS и добавьте родительские простые классы <div class="itemWrap"> в <div class="d-flex align-items-center">, тогда не нужны

.itemWrap {
    display: flex;
    align-items: flex-top;
}

Не требуется код avobe, если вы добавляете загрузчик CSS

.itemWrap {
    display: flex;
    align-items: flex-top;
}
.dvi1,
.dvi2,
.dvi3 {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}
.div2 {
    background: gray;
    padding: 10px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li {
    padding: 2px 0;
}
<div class="itemWrap">
    <div class="div1" style="width: 50%;padding: 0;margin: 0">
        <button type="submit" style="width: 90% !important;  margin: 20px auto !important;">
            <p class="register-text">Register</p>
        </button>
    </div>
    <div class="div2">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th</p>
    </div>
    <div class="div3" style="width: 50%;padding: 0;margin: 0" id="w0">
        <ul class="eauth-list">
            <li>
                <button style="width:90%" type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
            </li>
            <li>
                <button type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
                <button type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
            </li>
        </ul>
    </div>
</div>
0 голосов
/ 04 апреля 2019

Попробуйте вот так:

<div class="row">
    <div class="col-md-4">Button1</div>
    <div class="col-md-4">Text</div>
    <div class="col-md-4">Button2</div>
</div>

При этом все 3 элемента окажутся внутри одной строки, и я разделю их в равных столбцах.Вы можете убедиться, что div с row row будет иметь полную ширину, и тогда ваши кнопки и текст будут иметь одинаковую ширину строки и будут выровнены по горизонтали, как вы упомянули

...