html - 使用引导方法居中不起作用?
问题描述
试图将单行居中在页面中间。但是,代码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>
解决方案
The problem is that you didn't specify a fixed height for body or container and use h-100 in searchbar. so this height: 100%;
will apply on an unset height so h-100 will not work.
To fix the problem you can add vh-100 d-flex align-items-center justify-content-center
to body class.
<body class="vh-100 d-flex align-items-center justify-content-center">...</body>
the d-flex align-items-center justify-content-center
classes putted to show the row at the center of the page
推荐阅读
- python - 跨多个函数调用的 Python 3.8 递归函数保存列表?
- python - 在 Python3 中打印列表
- c# - 使用 Firebase 6.15.0 按下播放按钮后 Unity 冻结
- ios - 在 SwiftUI 中导航到列表视图会立即将列表向上移出屏幕
- python - 修改表达式以仅匹配绝对字符串
- tensorflow - 如何将 L2 正则化添加到 ResNet50?如何解决过拟合的问题?
- java - Docker ARGs 不会在 docker 文件中被替换
- python - 如何获得居中滚动的意思?
- flutter - 使用控制器参数flutter时Flare Actor突然消失
- node.js - 如何在 Node Js 中写一些带胡子的东西