Question

我的代码（full version）：

<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”。所以我有了使用height属性和像素来做到这一点，我知道这是一种糟糕的方法。所以我的问题是，如何以适当的响应友好方式设置输入组元素的高度？

（对于模态页脚，我没有像在模态主体中那样设置容器以及行和列，这很糟糕吗？）

Answer 1

将.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>

Answer 2

Bootstrap并未明确设置按钮的高度，它是根据内容的大小加上其边距，边距和边框自动计算出来的。但是，自定义选择的高度是显式设置的，因此不幸的是，没有一种方法可以缩小它的大小，而不必显式覆盖它以及标签上的属性。

您的操作方式并没有那么糟糕，我认为这是Bootstrap最大的缺点：如果您甚至需要适度自定义样式，您将最终陷入困境并超越它尽管CSS的某些组件非常有用，但CSS的使用时间要比使用CSS的网格系统节省的时间长得多。您可能只想使用自己设置样式的自定义输入元素，这样就可以使用flexbox自动调整其大小。

否则，如果将h-100添加到select元素中，则它应该是您想要的。请注意，如果您确实缩小了选区的高度，则还需要覆盖其填充和/或字体大小，以防止文本被截断。

Answer 3

在使用Bootstrap的项目中，带有d-flex的任何元素都是flexbox容器，从而使直接子元素成为弹性项目。

当flex-direction等于row时，Flexbox可以极大地更改项目的高度，这是默认设置。这些物品自然会占据flexbox容器的高度。

在项目上应用固定的height可能会有所帮助，但在这种情况下，可能会更容易在以这种方式生效的元素<select>和<button>周围添加包装器div通过flexbox容器。这样，可以通过flexbox容器更改添加的包装的高度，但内部的<select>保持其自然高度。

Awesome resource about how flexbox works.

了解如何设置按钮的高度

3 个答案: