gpt4 book ai didi

html - 当窗口大小减小时,表格堆叠在侧边栏下方

转载 作者:行者123 更新时间:2023-11-28 10:47:30 25 4
gpt4 key购买 nike

使用由两列组成的 Bootstrap 创建网站。第一列是侧边栏,第二列由表格组成。

当屏幕尺寸未缩小时,页面看起来不错。

但是当窗口尺寸减小时,表格会堆叠在侧边栏下方。

我希望表格保持在侧边栏旁边。

http://www.bootply.com/128015

代码如下。

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><h1>&nbsp;LDSLDSLDLSDL</h1></a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="" height="75px" width="337.5px"></a></li>

</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-2">
<div class=" bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav ">
<li><a href="#"><i class="icon-chevron-right"></i>Book an appointment </a></li><hr>
<li><a href="#"><i class="icon-chevron-right"></i>Search</a></li><hr>
<li><a href="#"><i class="icon-chevron-right"></i>Visits</a></li><hr>
<li><a href="#"><i class="icon-chevron-right"></i> Share Info</a></li><hr>
<li><a href="#"><i class="icon-chevron-right"></i> Association</a></li><hr>
<li><a href="#"><i class="icon-chevron-right"></i>Upload Document</a></li><hr>

</ul>
</div>
</div>
<div class="col-md-10">
<table class="table">
<tbody><tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
</tbody></table>
</div>
</div>
</div>

最佳答案

在较小的分辨率下,这些元素不再具有它们的样式(因为某些 Bootstrap 媒体查询条件),因此您可以将它们添加回来:

.col-md-2 { 
width: 16.67%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}

如果您将它们添加到您自己的样式中并使它们更加特殊(通过在每个 col-class 之前添加“.container-fluid”)它们将被覆盖并且表格将不再堆叠在下面。

.container-fluid .col-md-2 { 
width: 16.67%;
}
.container-fluid .col-md-10 {
width: 83.33%;
}
.container-fluid .col-md-1, .container-fluid .col-md-2, .container-fluid .col-md-3, .container-fluid .col-md-4, .container-fluid .col-md-5, .container-fluid .col-md-6, .container-fluid .col-md-7, .container-fluid .col-md-8, .container-fluid .col-md-9, .container-fluid .col-md-10, .container-fluid .col-md-11, .container-fluid .col-md-12 {
float: left;
}

或者在每个样式属性后添加“!important”。

 .col-md-2 { 
width: 16.67% !important;
}
.col-md-10 {
width: 83.33% !important;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left !important;
}

关于html - 当窗口大小减小时,表格堆叠在侧边栏下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22910299/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com