个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我尝试在这个 Bootstrap 示例中使用左列中的表格和右列中 2 行中的 4 列。这是代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" style="background-color:lavender">
<p>Table which is hovered, stripped, bordered, contextual</p>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavender;">
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
</body>看起来像这样: 
左栏高度随桌面高度自动调整，这很好。问题是右列没有根据左列调整其高度。我希望右列高度相对于左列高度，即平均分为2个堆叠列，这应该根据左列宽度自动调整:假设我有更多的表格行，左列高度肯定会增加但右栏高度也应该增加并且仍然是左栏高度的 50%。所以它看起来像这样:
最佳答案
基本上，您需要一些 flexbox 魔法。您可以将 flexbox 设置添加到 Bootstraps row 和 col- 但这本质上是不好的做法。我用快速代码做了一些测试，无法逃避这一点，但如果有更多时间和对 flexbox 的理解，你可以解决问题。最好的做法是始终设置新元素，永远不要自定义 BS 网格元素的任何 CSS。这意味着永远不要向 .row 或 .col- 之类的元素添加类，除非您要扩展这些组件。
说明:第二个 col- 有正确的高度，但它的 child 没有(.row)，所以你必须制作第二个 col- 一个 flexbox 元素(因此让它的 child 知道它的高度)并让 child (现在是 flexbox 元素)增长(均匀分布)。但同样，这不是一个好的做法，因为您不应该调整 BS 组件，它们有自己的属性，这些属性可能会以不希望的方式重叠。
TL:DR:将 display:flexbox 添加到第二个 col-xx-x 并制作 .row 里面随着 flex-grow:1 增长，但是为了更好的代码标准应该研究它。
关于javascript - Bootstrap : set height of a div relative to the height of another div?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55008339/
26
4
0
我知道，关系数据库是一种数据库，其中一个表中的字段链接到其他表中的行，就像这样。 但我不明白这对我作为网络开发人员意味着什么! 据我所知，具有联接和嵌套选择的查询会降低性能(尤其是具有数十个联接的 d
我正在逻辑层面上设计一个数据库，以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理，所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Jira 中，将项目链接在一起既简单又实用。 例如，您可以轻松克隆一个问题:创建问题 100，将其克隆到 101。100 然后显示“这个问题有一个克隆:101”，然后 101 显示“这个问题是一个
所以我有这些实体: Group { id: number; name: string; persons: Person[]; } Person { name: stri
我真不敢相信，经过 5 年的 Rails 编程，我还没有想出一个好的解决方案来解决这个常见问题。另外，我假设这个特定问题有 100 个答案，但我不知道定义(关系？协会？等)来很好地搜索它。所以我们开始
我想在我的数据库记录中包含动态字段。 例如:我想构建一个应用程序供用户创建自己的表单。 用户可以创建以下表单: 个人资料: 全名 街道 工作 电话 首页 工作 移动 兴趣 兴趣 1 兴趣 2 兴趣 3
共有三个表:businesses、categories、categorizations、 CREATE TABLE businesses ( id SERIAL PRIMARY KEY, na
这个问题在这里已经有了答案: How can I vertically center a div element for all browsers using CSS? (48 个答案) 关闭 6
对于问题的错误措辞，我们深表歉意。我是 stackoverflow 的新手，也是 PIG 的新手，正在尝试自己进行实验。 我有一个处理 words.t 文件和 data.txt 文件的场景。 文字.t
关于像Cassandra 这样的反革命NoSQL 数据库的讨论很多。 , CouchDB , Hypertable , MongoDB , Project Voldemort , BigTable ，
我的处境与ICTylor's post here 类似。 . 所以我有: user1=User.find(1); user2=User.find(2); written=Micropost.where
尝试获取与事件关联的用户列表。这是我 Eloquent 模型: 用户.php: public function fbevents() { $this->belongsToMany('Fbeve
我有一个在 MySQL 数据库上运行的 Web 应用程序(正在开发中)。我正在考虑将我的应用程序迁移到 Google App Engine，并希望更好地了解如何将我的简单关系数据库模型转换为非关系方法
我应该在构造函数中放入什么:与实例相关的东西还是与类相关的东西？ 考虑这段代码: var count = 0 TView = function (x, y) { this.x = x, this.y
我正在努力使用 postgreSQL，因为我不知道如何将 A 类型的一个实例链接到 B 类型的一组实例。我将举一个简短的例子: 假设我们要建立一个包含音乐专辑和人物的数据库，每个人都有一个他们最喜欢的
我需要检索一个对象并获取关系和嵌套关系。 所以，我有以下三个模型: 用户模型: module.exports = { attributes: { name: { type: '
给定一个表定义: Articles: art_id | name -------|-------------- 1 | article1 2 | article2 3
谁能举例说明“em 是相对于字体大小的，% 是相对于父元素的”？ 相对于字体大小和相对于父元素是什么意思？ 最佳答案 考虑一下您是否要在另一个框内定义一个框的高度。如果您将高度指定为 50%，它将是包
我有一个多对多关系，当我加载位于此关系一侧的实体时，我希望将另一侧相关实体的 ArrayCollection 视为其属性。然而，这并没有发生——加载的 ArrayCollection 中没有任何元素，
Relation#update(id, attributes) 文档提到“无论对象是否成功保存到数据库，都会返回结果对象。”，而 Relation#update_all (updates, condi
我是一名优秀的程序员,十分优秀！