- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我已经研究过这个问题,但没有得到满意的答案。我正在使用 Bootstrap 的网格布局。
请看Fiddle here
并调整输出窗口的大小 - 在调整大小时,您可能已经注意到,当窗口大到足以添加 col-sm- 类时,我的表格布局会中断。
我想要的是当它们彼此相邻时,两列的高度应该相同(最大元素的高度),当它们彼此顶部/底部时,它们应该有自己的高度(现在有效).
HTML
<div class="container">
<div class="architect-table">
<div class="row">
<div class="cell column-1 col-xs-12 col-sm-6"> abcde </div>
<div class="cell column-2 col-xs-12 col-sm-6"> abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde </div>
</div>
</div>
CSS
.architect-table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
min-height: 44px;
border: 1px solid black;
}
但我知道,如果我删除 float: left
样式,一切都会正常进行。但我不能,因为我想要 Bootstrap 的网格布局。任何帮助将不胜感激。
最佳答案
如果 flexbox
是一个选项,你可以让你的 row
成为一个 wrapping flexbox
- 请看下面的演示:
.architect-table {
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.architect-table > .row > .cell {
min-height: 44px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">
<div class="architect-table">
<div class="row">
<div class="cell column-1 col-xs-12 col-sm-6">abcde</div>
<div class="cell column-2 col-xs-12 col-sm-6">abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</div>
</div>
</div>
</div>
关于html - 表布局和向左浮动和 Bootstrap 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41481467/
我为 S3 做了一个额外的布局(所有布局的反叛),人们说,使用 layout-sw320dp 对 s3 有好处。一切正常,s3 选择了这个文件夹,布局在 s3 上看起来很棒。 但是当我尝试在 10"平
我是 CSS 的新手,我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。 目前,页脚在尺寸和位置上似乎都没有对齐。 I have attached
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)? 需要与旧 API 级别(低至 10)兼容的东西 解决方案 我最终在接受的答案中使用了 xml 方法。更进一步,我还添加
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。 窗口顶部的两个 QWidget
Accordion 布局是堆叠面板布局,因为此时只有一个面板可见,但我想同时显示两个面板可见,所以我们可以使用 Accordion 面板来做到这一点吗?? 最佳答案 您不能扩展现有的 Accordio
我只是想知道,作为一个假设示例,针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初,我都想添加所有学生(我将手动执行此操作 - 现在,是否应该为这里的每个学
在 CVS 中,我们的项目中有多个目录。 有一个夜间构建,它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点,如果我们迁移到 SVN,我必须修改构建脚本以从不同的存
我在 WPF Windows 上有几个列表框,带有 Height="Auto" Width="Auto"在表格上设置 表单大小在不同分辨率下完美匹配,但问题是当我按下最大化按钮时,在表单调整大小时会看
仅供引用,我是 WPF 的新手。 我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外,我尝试将文本块放在边框控件中,但我收到的错误消息说“ child 只能
我是CodeIgniter的新手。我想使用包含菜单,页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如,我可以在asp.net中创建母版页,或者在asp.ne
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值,如图- 但是,当我显示表达式时,我得到这样的布局 - 我的问题是,是否可以更改变量窗口的布局也可以在右侧显示值,因为这对我来说很
上面的代码中,放置“as=”footer_links”是什么意思? 最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此,对于以下内容: 在outer_block.p
我试图编写一个检查注册表值的功能,以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
我有一个布局,但无法提前定义其所有区域,因为它们是未知的。 稍后创建了 ItemView,我想使用 View 的 ID 作为区域名称在布局中创建一个新区域,这样我就可以说: layout.dynami
我们有一个相当复杂的 gulp 构建过程,涉及多个模块,每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点,如下所示: 每一列都是一个模块,列内的每一行都是后续的构建步骤。一旦第 1
这就是问题所在,我有一个 MainWindow 类,它在一个设置例程中扩展了 JFrame,我将该类的布局设置为新的 CardLayout()。这一切都工作正常,但是当我从 JFrame 请求布局并将
我正在制作一个简单的迷宫程序,用户可以在其中创建墙壁、路径、起点和终点,单击“解决”,迷宫将被解决。为此,我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧,我有一个
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值,如图- 但是,当我显示表达式时,我得到这样的布局 - 我的问题是,是否可以更改变量窗口的布局也可以在右侧显示值,因为这对我来说很
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行,然后绘制 2 条水平线,在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。 我知道这
我是一名优秀的程序员,十分优秀!