Узнайте, как была установлена ​​высота кнопки - PullRequest
1 голос
/ 01 июня 2019

Мой код ( полная версия ):

<div class="modal-body">
  <div class="container">
    <div class="row">
      <div class="col-8 p-0">
        <form class="form-group">
          <form>
            <input type="text" class="form-control w-100 pr-0 mr-0" id="quick-add-task-control-text-area" placeholder="Task name">
          </form>
        </form>
      </div>
      <div class="col-4 p-0">
        <button type="button" class="btn btn-secondary w-100 h-100 ml-0" id="schedule-button">Schedule</button>
      </div>

    </div>
  </div>
  <div class="modal-footer d-flex flex-row justify-content-start pl-0">

    <button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save changes</button>

    <div class="input-group mb-0 w-50">
      <div class="input-group-prepend">
        <label class="input-group-text" for="inputGroupSelectPriority">Priority</label>
      </div>
      <select class="custom-select" id="inputGroupSelectPriority">
        <option selected>Choose...</option>
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
      </select>
    </div>


  </div>
</div>
</div>
</div>

После открытия моего модального окна на панели навигации (значок «+») я хотел, чтобы высота моей группы ввода была такой же, как и у кнопки «Сохранить изменения».налево.После проверки его стилей («кнопки сохранения») я не мог понять, как была вычислена его высота. Я не нашел ни em, ни rem, ни какой-либо ссылки на родительский элемент, такой как класс начальной загрузки «h-100».сделать это, используя свойство высоты и пиксели, что, как я знаю, является ужасным способом сделать это. Поэтому мой вопрос заключается в том, как правильно установить высоту элемента input-group, подходящую для ответа?

(Для модального нижнего колонтитула я не установил контейнер, строку и столбцы, как в модальном теле, это ужасно?)

Ответы [ 3 ]

1 голос
/ 01 июня 2019

Добавьте .h-100 класс к .input-group и .input-group-text и установите align-items: center на stretch с .modal-footer. Вы можете сделать то, что хотите, изменив его.

body {
  height: 100vh;
}


/* div {
    border-color: coral;
    border-width: 1px;
    border-style: solid;
} */


/* #cross {
    font-size: 3rem;
} */

#tomatoIcon {
  margin: 5px;
  margin-right: 15px;
}

#topText {
  color: white;
  padding-top: 40px;
  padding-bottom: 30px;
}

#bg-top {
  background-color: grey;
}


/*div {
    
    border: 1px solid red;
}*/

#tomatoIcon {
  margin: 5px;
  margin-right: 15px;
}

#minutes,
#colon,
#seconds {
  font-size: 1rem;
}

#minutes,
#seconds {
  padding: 0px 0px;
}

.fa-play,
.fa-pause {
  padding-right: 5px;
}

.fa-pause {
  display: none;
}

.bold {
  font-weight: bold;
}

.lemonChiffon {
  background: LemonChiffon;
}

#timerButton {
  margin: 15px;
}

th {
  font-size: 1rem;
}

td {
  font-size: 0.75rem;
}

#history {
  margin-top: 50px;
}

.navbar-icon {
  margin-right: 10px;
}

#schedule-button {
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
}

.dropdownMenuButton {
  margin: 0 auto;
}

.input-group {
  height: 31px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.input-group-prepend {
  line-height: 31px;
}

.input-group-text {
  height: 31px;
}

.custom-select {
  height: 31px;
}


/*#timer {
    
    justify-content: center;
    align-items: center;
    margin: 0 auto;        
}*/
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <link rel="stylesheet" href="styles/styles.css">


</head>

<body>

  <!-- Navbar -->


  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="col-3">
    </div>

    <img src="images/tomato.png" alt="Tomato icon" id="tomatoIcon">
    <a class="navbar-brand" href="#">Koroko</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarToggler">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item mx-2">
          <a class="nav-link" data-toggle="modal" data-target="#quick-add-task-modal">+</a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link align-top" data-toggle="modal" data-target="#settingsModal">Settings</a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>

    <div class="col-3">
    </div>
  </nav>

  <div class="container">
    <div class="row mt-5">
      <div class="col-sm-4" id="inbox">
        <i class="fas fa-inbox mx-2"></i>
        <span id="inbox-text">Inbox</span>
        <span id="inbox-number-of-items" </span>
      </div>
      <div class="col-sm-8">
        div id content placeholder
      </div>
    </div>

    <div class="row mt-3">
      <div class="col sm-4">
        <i class="fas fa-calendar-alt mx-2"></i>
        <span>Today</span>
      </div>
      <div class="col-sm-8">
        div id content placeholder
      </div>
    </div>
  </div>


  <div class="container d-flex lemonChiffon flex-column" id="timer">
    <div class="justify-content-center text-center">
      <div class="col-12">
        <button type="button" class="btn btn-success" id="timerButton">
                        <span id="minutes">25</span>
                        <span id="colon">:</span>
                        <span id="seconds">00</span>
                        <i class="fa fa-play" aria-hidden="false" id="fa-play"> </i>
                        <i class="fa fa-pause" aria-hidden="false" id="fa-pause"> </i>
                    </button>
      </div>
    </div>
    <div class="justify-content-center text-center">
      <div class="col-12">
        <span id="nextBreak">Next break is a <span class="bold">short break</span></span>
      </div>
    </div>
  </div>

  <!-- Settings Modal -->
  <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="settingsModal">Settings</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="d-flex flex-column p-2">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="alertsCheckbox">
                <label class="form-check-label" for="alertsCheckbox">
                                    Enable browser alerts
                                </label>
              </div>
              <!-- INLINE STYLING. NOT RECOMMENDED. LOOK FOR ALTERNATIVES. -->
              <div style="font-size: 0.8em;" class="pl-4 mb-3">Display browser alert when pomodoro/break is over</div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="disableSoundCheckbox">
                <label class="form-check-label" for="disableSoundCheckbox">
                                    Disable sound
                                </label>
              </div>
              <div class="mt-3 font-weight-bold mx-auto">Set custom times<span class="font-weight-normal">
                                    (in minutes) </span>
              </div>

            </div>

            <form>
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="inputPomodoro">Pomodoro</label>
                  <input type="number" min="1" max="90" class="form-control" id="inputPomodoro" placeholder="25">
                </div>
                <div class="form-group col-md-4">
                  <label for="inputShortBreak">Short break</label>
                  <input type="number" min="1" max="90" class="form-control" id="inputShortBreak" placeholder="5">
                </div>
                <div class="form-group col-md-4">
                  <label for="inputLongBreak">Long break</label>
                  <input type="number" min="1" max="90" class="form-control" id="inputLongBreak" placeholder="15">
                </div>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeModal">Save</button>
                <button type="button" class="btn btn-primary" id="resetButton">Reset to default</button>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Quick Add Task Modal -->
  <div class="modal fade" id="quick-add-task-modal" tabindex="-1" role="dialog" aria-labelledby="quick-add-task-modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="quick-add-task-modal">Quick add task</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
        </div>
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-8 p-0">
                <form class="form-group">
                  <form>
                    <input type="text" class="form-control w-100 pr-0 mr-0" id="quick-add-task-control-text-area" placeholder="Task name">
                  </form>
                </form>
              </div>
              <div class="col-4 p-0">
                <button type="button" class="btn btn-secondary w-100 h-100 ml-0" id="schedule-button">Schedule</button>
              </div>

            </div>
          </div>
          <div class="modal-footer d-flex flex-row justify-content-start pl-0 align-items-stretch">
            <!-- add .align-items-stretch -->

            <button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save changes</button>

            <div class="input-group mb-0 w-50 h-100">
              <!-- add .h-100 -->
              <div class="input-group-prepend">
                <label class="input-group-text h-100" for="inputGroupSelectPriority">Priority</label>
                <!-- add .h-100 -->
              </div>
              <select class="custom-select" id="inputGroupSelectPriority">
                <option selected>Choose...</option>
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
              </select>
            </div>


          </div>
        </div>
      </div>
    </div>



    <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

    <-- Bootstrap stuff -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>


      <script src="./scripts/bundle.js"></script>

</body>

</html>
1 голос
/ 02 июня 2019

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

То, как вы это делаете, на самом деле не так уж плохо, просто указывает на то, что, на мой взгляд, является самым большим недостатком Bootstrap: что если вам нужно хотя бы умеренно настроить свои стили, вы в конечном итоге будете боротьсяи переопределять его CSS гораздо дольше, чем вы экономите, используя его сеточную систему, хотя некоторые из компонентов весьма полезны.Вы можете просто захотеть использовать пользовательский элемент ввода, который вы стилизуете сами, так что вы можете использовать flexbox для автоматического увеличения его размера.

В противном случае, если вы добавите h-100 к элементу выбора, это должно быть то, что вы 'ищу.Обратите внимание, что если вы уменьшите высоту выделенной области, вам также потребуется переопределить ее отступы и / или размер шрифта, чтобы предотвратить обрезание текста.

0 голосов
/ 01 июня 2019

В проектах, использующих Bootstrap, любой элемент с d-flex является контейнером flexbox, что позволяет непосредственным дочерним элементам сгибать элементы.

Flexbox может резко изменить высоту элементов, когда flex-direction равно row, что является значением по умолчанию. Элементы, естественно, будут занимать высоту контейнера flexbox.

Применение фиксированных height к элементам может помочь, но в этом случае может быть проще добавить div-оболочку для таких элементов, как <select> и <button>, которые обрабатываются таким образом контейнером flexbox. Таким образом, добавленная вами оболочка может изменить свою высоту в контейнере flexbox, но <select> внутри сохраняет свою естественную высоту.

Потрясающий ресурс о том, как работает flexbox.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...