Bootstrap 4将列扩展到XL屏幕上的侧栏，否则在两个内容区域之间排序 [英] Bootstrap 4 Expand Column To Sidebar on XL Screens Otherwise Order Between Two Content Areas
本文介绍了Bootstrap 4将列扩展到XL屏幕上的侧栏，否则在两个内容区域之间排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这就是我希望它在全屏台式机/笔记本电脑上的外观.
This is what I want it to look like on a full-screen desktop/laptop.
在中型/小型设备上，我希望右侧边栏在搜索输入区域内和下方以及内容区域之前折叠.
On medium / smaller devices, I want the right sidebar to collapse in and under the search input area and before the content area.
较小的设备(将侧边栏折叠成一个小段)
Smaller Devices (Fold sidebar into)
我认为可以通过Bootstrap order类实现此目的，但不确定要实现此目的的网格布局结构(容器，行，列).
I think this can be achieved with Bootstrap order classes but not sure about what grid layout structure (container, rows, columns) to achieve this.
在xl屏幕上，下面的代码在搜索区域下方显示了一个较大的空白区域.我希望内容区域在搜索后立即填充此空白区域.
The code below shows a large blank area below the search area when on xl screens. I want the content area to fill this blank area immediately after the search.
完整的复制/粘贴工作示例:
Full copy/paste working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Page Title Here</title>
<style>
html, body {
height: 100%;
}
div {
border: 1px solid #9fcdff;
}
header {
border: 1px solid #9fcdff;
}
main {
height: 100%;
}
footer div {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler mr-2" id="nav-button"
type="button"><i class="fas fa-bars"></i></button>
<div class="ml-auto ml-md-0"></div>
<a class="navbar-brand">Website</a>
<i class="ml-md-auto fas fa-cog"></i>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
<ul>
<li>Sidebar</li>
</ul>
</div>
<div class="col">
<div class="row">
<div class="col-12 col-xl-9 order-xl-0" id="search-stuff">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<form>
<div class="form-group">
<input class="form-control" type="search" placeholder="Search...">
</div>
</form>
</div>
<div class="col-12 col-xl-3 order-xl-1" id="cards-stuff">
<div class="card">
<img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card">
<img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-xl-9 order-xl-2" id="content-stuff">
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>Copyright 2020</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
推荐答案
通常，回答我自己的问题.我复制了右侧边栏的代码，并根据屏幕大小显示一个或另一个.我不知道这是常见的实践做法还是皱眉.我真的很想避免重复代码，但是由于在两个内容块之间的 列的堆积，这个问题似乎很难解决.如果它是顶部或底部，那就没问题了.
Per-usual, answering my own question. I duplicated the right sidebar's code and display either one or the other based on the screen size. I wonder if this is common in-practice or frowned upon. I really would have liked to avoid duplicating code but this problem seems rather difficult because of the stacking of a column between two blocks of content. If it were top or bottom, it would be no issue.
这是我的最佳尝试.怀疑任何人都会有更好的答案.
Here's my best attempt. Doubt anyone will have a better answer.
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Page Title Here</title>
<style>
html, body {
height: 100%;
}
div {
border: 1px solid #9fcdff;
}
header {
border: 1px solid #9fcdff;
}
main {
height: 100%;
}
footer div {
border: 1px solid #ff63ba;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler mr-2" id="nav-button"
type="button"><i class="fas fa-bars"></i></button>
<div class="ml-auto ml-md-0"></div>
<a class="navbar-brand">Website</a>
<i class="ml-md-auto fas fa-cog"></i>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
<ul>
<li>Sidebar</li>
</ul>
</div>
<div class="col-lg-8 col-xl-6">
<div class="align-self-start" id="search-stuff">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li aria-current="page" class="breadcrumb-item active">Library</li>
</ol>
</nav>
<form>
<div class="form-group">
<input class="form-control" placeholder="Search..." type="search">
</div>
</form>
</div>
<div class="d-lg-block d-xl-none" id="cards-stuff">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
<div class="" id="content-stuff">
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
<div class="post">
<h2>Some Headline Here...</h2>
<p>CSS</p>
</div>
</div>
</div>
<div class="col-xl-3 d-none d-xl-block">
<div id="cards-sidebar">
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
<div class="card">
<img alt="Card image cap"
class="d-none d-xl-block card-img-top"
src="img/placeholder.svg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>Copyright 2020</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
这篇关于Bootstrap 4将列扩展到XL屏幕上的侧栏，否则在两个内容区域之间排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
