gpt4 book ai didi

html - 为 row-fluid bootstrap 设置背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:52 25 4
gpt4 key购买 nike

这是一个简单数据表的代码,其中包含一些使用 Bootstrap 设置样式的分页控件,以及用于网格的数据表。

<!DOCTYPE html>
<html>
<head>
<title>Test page, using dataTables</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>

<style>
div.dataTables_info{
padding-top: 0px !important;
}

#id1{
background-color: lightblue !important;
}

div.panel-body{
padding: 0px !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">

<div class="panel panel-default">

<div class="panel-heading">
Titulo tabela
</div>

<div class="panel-body">
<table id="tabela" class="table table-bordered table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="http://legacy.datatables.net/extras/thirdparty/ColReorderWithResize/ColReorderWithResize.js"></script>
<script>
(function(){
$('#tabela').DataTable({
"dom": 'Rrt<"row-fluid"<"#id1"<"#a.col-md-4"i><"col-md-4"l><"#b.col-md-4"p>>>'
});
})();
</script>
</body>
</html>

这是一个 working fiddle上面的代码,和here全屏结果。

问题在于,对于桌面类型的屏幕,在全屏模式下,包含分页控件的底行会失去背景色。有什么方法可以为所有屏幕宽度保留背景吗?

最佳答案

之所以会丢失背景,是因为在大屏幕上,#id1 的内容是 float 的。

你可以像这样放置一个clearfix:

#id1:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}

https://jsfiddle.net/tnoefud0/3/embedded/result/

关于html - 为 row-fluid bootstrap 设置背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32317659/

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