Question

尝试将单行居中在页面中间。但是，代码h-100和my-auto在我放置它们的所有div上均无效。

<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" />


<div class="search-page"></div>
    <div class="container search-items">
      <div class="row h-100 justify-content-center searchBar">
        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"></div>
          <div class="input-group">
            <input type="text" class="form-control col-xs-9 col-sm-9 col-md-9 col-lg-9 col-xl-9" id="search-input" placeholder="" autocomplete="off" required aria-label="Text input with dropdown button">
            <input type="text" class="form-control col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3" id="zip-input" placeholder="" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
            required>
            <div class="input-group-append dropdown-container">
              <button class="btn btn-outline-secondary btn-success dropdown-toggle" id="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu">
                <section id="dropDown">
                  <select class="mdb-select colorful-select dropdown-primary md-form" id="" multiple
                    searchable="Search here..">
                    <option value="" disabled selected></option>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                  <div class="form-group row">
                    <div class="col-5">
                      <input class="form-control" type="number" id="calorie-input" />
                    </div>
                    <label for="example-number-input" class="col-2 col-form-label"
                    ></label
                    >
                    <!-- End of Calories input -->
                  </section>
                  <!--  End Multiselect Drop down -->
              </div>
            </div>
          </div>
          <button type="button" id="searchBtn" class="btn btn-success">blah</button>
        </div>
      </div>
    </div>

Answer 1

问题是您没有为主体或容器指定固定高度，而是在搜索栏中使用h-100。因此此height: 100%;将适用于未设置的高度，因此h-100无法正常工作。要解决此问题，您可以将vh-100 d-flex align-items-center justify-content-center添加到body类。

<body class="vh-100 d-flex align-items-center justify-content-center">...</body>

放置在页面中心的d-flex align-items-center justify-content-center类

使用引导方法居中不起作用？

1 个答案: