英文:
bootstrap col-auto layout height alignment breaking when removing a button component
问题
我正在尝试使用Bootstrap创建一个弹性列布局，其中页眉和页脚区域具有自动高度，而内容区域可滚动。当我们在页脚和页眉列中插入组件时，它将采用组件的大小，其余的空间将由内容区域占据。到目前为止，一切都运行得很顺利。但是当我隐藏/移除“previous button”（上一个按钮）时，具有“col-auto”类的页脚的高度对齐会中断。请帮助。
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
setTimeout(() => {
document.querySelector('.prev-btn').remove();
}, 2000);
<!-- 语言: lang-css -->
html,
body {
height: 100%;
}
<!-- 语言: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid p-0 h-100">
<div class="row g-0 flex-column h-100">
<header class="col-auto bg-secondary">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="col d-flex align-items-center justify-content-center overflow-auto">
<div class="col-6 py-3 m-auto">
Content area
</div>
</div>
<footer class="col-auto">
<div class="container-fluid p-3 bg-light">
<div class="row g-0 align-items-center">
<div class="col">
<button class="btn fw-bold btn-outline-danger shadow-none">CANCEL & RESTART</button>
</div>
<div class="col-auto px-3 text-center">STEP 1 OF 4</div>
<div class="col">
<div class="d-flex justify-content-end">
<button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
<button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- 结束代码段 -->
注意：这是您提供的HTML和CSS代码，我没有对其进行翻译。如有任何其他问题，请随时提出。
英文:
I am trying to get a flex column layout using bootstrap with the header and footer area taking auto height and the content area scrollable. When we insert components inside the footer and header column it will take the size of the components and the rest of the space will be taken by the content area. So far it's working very well. But when I hide/remove the previous button, the footer with col-auto class the height alignment breaks. Please help.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setTimeout(() => {
document.querySelector('.prev-btn').remove();
}, 2000);
<!-- language: lang-css -->
html,
body {
height: 100%;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid p-0 h-100">
<div class="row g-0 flex-column h-100">
<header class="col-auto bg-secondary">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="col d-flex align-items-center justify-content-center overflow-auto">
<div class="col-6 py-3 m-auto">
Content area
</div>
</div>
<footer class="col-auto">
<div class="container-fluid p-3 bg-light">
<div class="row g-0 align-items-center">
<div class="col">
<button class="btn fw-bold btn-outline-danger shadow-none">CANCEL &amp; RESTART</button>
</div>
<div class="col-auto px-3 text-center">STEP 1 OF 4</div>
<div class="col">
<div class="d-flex justify-content-end">
<button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
<button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
这似乎是因为在重新布局期间，“取消和重新启动”按钮正在换行。您可以使用Bootstrap的text-nowrap类来防止这种情况，尽管这可能需要在较小的屏幕上进行其他布局更改。一个解决方案可能是将“1 of 4”标签移动到移动设备上的按钮上方。
英文:
This seems to be happening because the CANCEL & RESTART button is wrapping during reflow. You can use Bootstrap's text-nowrap class to prevent this, though that may require other layout changes on smaller screens. One solution might be to move the "1 of 4" label above the buttons for mobile.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
setTimeout(() => {
document.querySelector('.prev-btn').remove();
}, 2000);
<!-- language: lang-css -->
html,
body {
height: 100%;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid p-0 h-100">
<div class="row g-0 flex-column h-100">
<header class="col-auto bg-secondary">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="col d-flex align-items-center justify-content-center overflow-auto">
<div class="col-6 py-3 m-auto">
Content area
</div>
</div>
<footer class="col-auto">
<div class="container-fluid p-3 bg-light">
<div class="row g-0 align-items-center">
<div class="col">
<button class="btn fw-bold btn-outline-danger shadow-none text-nowrap">CANCEL &amp; RESTART</button>
</div>
<div class="col-auto px-3 text-center">STEP 1 OF 4</div>
<div class="col">
<div class="d-flex justify-content-end">
<button class="btn fw-bold btn-outline-secondary px-5 me-3 shadow-none prev-btn">PREVIOUS</button>
<button class="btn fw-bold btn-outline-primary px-5 shadow-none">NEXT</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论