Bootstrap,nav-stacked 实际上并未堆叠列表条目
Bootstrap, nav-stacked not actually stacking list entries
我似乎遗漏了一些明显的东西
我希望 home blog contact
个条目始终堆叠在一起。
我错过了什么?
这是实际呈现的内容:
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href='/'>Home</a></li>
<li role="presentation"><a href='/blog/'>Blog</a></li>
<li role="presentation"><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
</div>
</footer>
</body>
Bootstrap中没有well
class 4.可以用card
class代替。
下面的代码片段几乎可以满足您的预期:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="min-height:90vh; ">
<hr>
<div class="row">
<div class="col-sm-3 col-md-2">
<br>
<br>
<!-- There's no "well" class in Bootstrap 4. The "card" class can be used instead. -->
<div class="card bs-sidebar" id="sidebar" style="background-color:#fff">
<nav class="nav nav-pills flex-column flex-sm-row2">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Blog</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Contact</a>
</nav>
</div> <!--bs-sidebar-->
</div> <!--col-sm-3 col-md-2-->
<div class="col-sm-9 col-md-10 ">
<div class='container-fluid'>
<div class="row">
<div class="col">
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col">
<p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
</div>
</div>
</div>
</footer>
参考:
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells
https://getbootstrap.com/docs/4.0/components/navs/#working-with-flex-utilities
我似乎遗漏了一些明显的东西
我希望 home blog contact
个条目始终堆叠在一起。
我错过了什么?
这是实际呈现的内容:
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href='/'>Home</a></li>
<li role="presentation"><a href='/blog/'>Blog</a></li>
<li role="presentation"><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
</div>
</footer>
</body>
Bootstrap中没有well
class 4.可以用card
class代替。
下面的代码片段几乎可以满足您的预期:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="min-height:90vh; ">
<hr>
<div class="row">
<div class="col-sm-3 col-md-2">
<br>
<br>
<!-- There's no "well" class in Bootstrap 4. The "card" class can be used instead. -->
<div class="card bs-sidebar" id="sidebar" style="background-color:#fff">
<nav class="nav nav-pills flex-column flex-sm-row2">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Blog</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Contact</a>
</nav>
</div> <!--bs-sidebar-->
</div> <!--col-sm-3 col-md-2-->
<div class="col-sm-9 col-md-10 ">
<div class='container-fluid'>
<div class="row">
<div class="col">
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col">
<p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
</div>
</div>
</div>
</footer>
参考:
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells
https://getbootstrap.com/docs/4.0/components/navs/#working-with-flex-utilities