相关疑难解决方法(0)
为什么Twitter Bootstrap表总是有100%的宽度？
假设这个标记:
<table class="table table-bordered" align="center">
没有我有多少单元格,表格总是100%宽度.为什么？
141
推荐指数
推荐指数
5
解决办法
解决办法
14万
查看次数
查看次数
HTML'td'的宽度和高度
HTML5中不支持"高度"和"宽度".如何在符合HTML5标准的同时设置td的宽度和高度？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>219 ??</title>
</head>
<body bgcolor="silver">
<div align="center">
<table>
<tr>
<td width="1000" height="250">
<object width="100%" height="100%" data="frameTop.html"></object>
</td>
</tr>
</table>
<table>
<tr>
<td width="300" height="700" >
<object width="100%" height="100%" data="frameLeft.html"></object>
</td>
<td width="700" height="700">
<object width="100%" height="100%" data="frameRight.html"></object>
</td>
</tr>
</table>
</div>
</body>
</html>
45
推荐指数
推荐指数
2
解决办法
解决办法
21万
查看次数
查看次数
超过12个带有水平滚动的引导列
我正在尝试使用bootstrap网格系统制作一个表.我知道我们每行应该只使用12列.但我希望有超过12列,整个表格都有水平滚动.所以我正在尝试使用以下代码片段
<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>
我想在一行中显示如上所述的8个字段.但是在第6场之后,其他两个领域正在下降.有没有办法让所有8个字段在单行中与水平滚动.
14
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
11
推荐指数
推荐指数
3
解决办法
解决办法
6289
查看次数
查看次数
使td固定尺寸(宽度,高度),而td的其余部分可以扩展
你知道吗,如何在表中修复td Width和Height的大小,允许表上的其余td根据需要扩展？
问题是,当td内部有数据时,它不会比数据收缩得多,但如果是空的,它将一直收缩,如果展开窗口,td将展开.
我想保持td的大小,无论你是扩展还是收缩窗口以及td是否有内部数据.
此外,我需要保持其余的td能够在展开窗口时展开.
类tableContainerRow2是我需要它的固定大小.例如
<style>
.divContainer {
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer {
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
}
.tableContainerRow2 {
background-color:white;
border:2px solid #0076BF;
}
</style>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td width="18%" style="white-space:nowrap;" >NHS Number</td>
<td width="17%"> </td>
<td width="10%" style="white-space:nowrap;">Date of Visit</td>
<td width="10%"> </td>
<td colspan="3" style="white-space:nowrap;">Care Time Started</td>
<td width="4%"> </td>
<td width="5%"> </td>
<td width="25%" rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
</tr>
<tr >
<td width="18%" class="tableContainerRow2"> 0123456789</td>
<td …10
推荐指数
推荐指数
2
解决办法
解决办法
12万
查看次数
查看次数
使用Bootstrap表格列宽
这是我在StackOverflow中的第一个问题,因为这是我第一次找不到帮助我解决问题的答案.
我正在尝试为带有引导程序的菜单创建一个表.我希望早餐,午餐和晚餐的每列宽度为30%,而且要说碳水化合物,脂肪和蛋白质10%,但我不能让它起作用.
我阅读了文档,实际上在这里发现了一个非常相似的静态.但是,我仍然无法使其发挥作用.我把我的代码放在CodePen中,这样你就可以看到我所看到的.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
<thead>
<tr class="m-0">
<th class="w-10">#</th>
<th class="w-30">Breakfast</th>
<th class="w-30">Lunch</th>
<th class="w-30">Dinner</th>
</tr>
</thead>
<tbody>
<tr class="m-0">
<th scope="row" class="w-10">Carbohydrates</th>
<td class="w-30">-
</td>
<td class="w-30">
-
</td>
<td class="w-30">-
</td>
</tr>
<tr class="m-0">
<th scope="row" class="w-10">Fat</th>
<td class="w-30">-
</td>
<td class="w-30">
-
</td>
<td class="w-30">-
</td>
</tr>
<tr class="m-0">
<th scope="row" class="w-10">Proteins</th>
<td class="w-30">-
</td>
<td class="w-30">
-
</td>
<td class="w-30">-
</td>
</tr>
</tbody> …2
推荐指数
推荐指数
1
解决办法
解决办法
7918
查看次数
查看次数
Bootstrap 4列大小调整在Google Chrome中无效
使用Bootstrap网格并在最小列大小以下调整页面大小时,我的列不会自动堆叠.最小尺寸的列甚至无法识别,只有第二大的列大小才能正常工作.如果它在Firefox和Atom HTML Preview中没有按预期工作,我会假设我错误地使用了网格.
这是我的代码......
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>bootstrap interface</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6 col-lg-12" style="background-color: red">
<h1>Red</h1>
</div>
<div class="col-sm-4 col-md-6 col-lg-6" style="background-color: white">
<h1>White</h1>
</div>
<div class="col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
<h1>Blue</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
图片
在chrome: bootstrap-faileding-chrome
在firefox中: bootstrap-working-firefox
我认为使用cdn bootstrap是一个问题,但在本地运行它也没有解决问题.
我用多个版本的Chrome测试了它并删除了我的所有CSS以查看它是否是我在引导程序中重写的内容.
2
推荐指数
推荐指数
2
解决办法
解决办法
2341
查看次数
查看次数
标签 统计
css ×3
html ×3
html-table ×2
alignment ×1
bootstrap-4 ×1
css3 ×1
firefox ×1
grid-layout ×1
html5 ×1
javascript ×1
object ×1