Bootstrap:容器内有两列，但其中一列应该会破坏容器
Bootstrap是一个流行的前端开发框架，用于快速构建响应式网页和Web应用程序。它提供了一套CSS和JavaScript组件，可以帮助开发人员快速搭建具有一致性和美观的界面。
在Bootstrap中，容器是一个用于包裹页面内容的元素。容器可以分为两种类型：固定宽度容器和流体容器。固定宽度容器具有固定的宽度，而流体容器会根据屏幕大小自动调整宽度。
在给定的情况下，如果容器内有两列，并且其中一列的内容过长或者设置了固定宽度，可能会破坏容器的布局。这可能导致内容溢出容器或者破坏整体页面的结构。
为了解决这个问题，可以采取以下几种方法：
- 使用Bootstrap的栅格系统：Bootstrap提供了一个强大的栅格系统，可以将页面内容划分为多个列，以适应不同的屏幕大小。通过合理使用栅格系统，可以确保容器内的列在不同屏幕大小下都能正确显示。
- 使用CSS样式进行调整：可以通过自定义CSS样式来调整容器内列的宽度和布局，以确保它们在容器内正确显示。可以使用CSS的flexbox布局或者其他布局技术来实现。
- 使用Bootstrap的响应式工具类：Bootstrap提供了一系列响应式工具类，可以根据屏幕大小来隐藏、显示或调整元素的样式。通过使用这些工具类，可以根据需要在不同屏幕大小下隐藏或调整破坏容器的列。
总结起来，为了避免容器内的列破坏容器，我们可以使用Bootstrap的栅格系统、自定义CSS样式和响应式工具类来调整和控制容器内的布局和元素显示。这样可以确保页面在不同屏幕大小下都能正确显示，并保持整体的美观和一致性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
3回答
我有两个漂浮的柱子并排。用户可以隐藏/折叠其中一列。在这种情况下，我希望扩展另一列以适合整个容器。
使用CSS可以做到这一点吗？
在简历中，可以让一个浮动扩展到它的容器的大小？即使元素是浮动的，如果它有width:auto，它也应该扩展。至少我认为这是可行的。
浏览 0提问于2010-08-11得票数 12
回答已采纳
1回答
我在计算列时遇到了问题。 当我在切片器中选择日期时，我希望在矩阵中显示两列:所选日期和去年同期。我已经计算了列来执行此操作，但当我选择它们时，会发生以下情况： ? 其中一列位于另一列之上，而不是两列。有人知道为什么会这样吗？我怎样才能改变它？ 非常感谢你提前这么做。 西尔维亚
浏览 13提问于2020-01-22得票数 0
我使用Bootstrap 5创建一个使用卡片的两列页面，其中卡片延伸到页面的底部。这部分工作正常。
右卡内有两列.第一列沿右边边缘有一个边框，以便在视觉上将两者分开。
不管列中内容的高度如何，我希望边框扩展到父卡的底部。
HTML
<div class="row">
<div class="col-2 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
浏览 7提问于2022-08-30得票数 0
回答已采纳
2回答
我有一个带有10000+条目的sql数据库，这些条目是在wpf列表框中填充的。我想根据表中某一列中的整数来显示图像。对于每个整数，我只有10个以上的选择，所以我只需要@10个图像。
我的问题是，如果用户向下滚动列表框，使用c#和wpf将图像链接到值的最快方法是什么？
我不想在列中使用图像的地址，因为数据的存储是非常重要的，我宁愿只匹配它。
我的意思是：
someInt | SomeData
(DisplaySomeImageHere) | thisWouldBeTheNumber1
(DisplayOtherImageHere) | thisWouldBeTheNumber2
等。
但我有上千
浏览 3提问于2012-03-06得票数 0
我希望能够在一列相同但另一列不同的表中找到匹配项。
示例表：
id team week
1 1 1
1 2 1
2 2 1
2 1 2
我想要一个查询，它将找到所有的ids，其中团队是不同的，但周仍然是相同的，所以像团队这样的东西不等于团队，但周等于周。
基本上，我想知道如果在同一周内有任何id更换了团队，我该怎么做？
浏览 0提问于2012-09-28得票数 8
回答已采纳
2回答
对于那些已经将其标记为重复的人，我不会尝试实现这一点：
我在处理响应式图像的同时保持纵横比，处理图像与仅仅使列变大不是一回事。
请看下面的图片，了解更多关于我正在尝试实现的信息。
我有两个主要参数。第一个被分成2个，有2个图像555*670。第二列被分成另外两列，其中包含4个图像。
我希望第二列(266*370)中的图像适应第一列。也就是说，第二列应该具有与第一列相同的组合高度(555*670)。第一列和第二列中的图像应该具有相同的高度，同时保持图像的纵横比，并且应该是响应性的。
我对改变图像大小等建议持开放态度，以实现这一点。这里有一个的链接。我使用bootstrap grid并在图像上将
浏览 1提问于2017-09-15得票数 0
我对bootstrap 3.3.5源代码中的这部分代码感到困惑
/*line 1585 - 1590*/
.container {
padding-right: 15px;
padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
margin-right: -15px;
margin-left: -15px;
}
它们是用来做什么的？
谢谢你们！
这是我在读完你的答案后的看法：
1.在.container中添加填充，使.container的内容远离边界；
2.但这意味着现在第一列/最后一列距离边界有2个填充，这不是很好。因此，添加
浏览 1提问于2016-09-01得票数 0
<code>B0</code>
我有像图片中这样的数据，其中有两列(Cday，Dday)，但有一些缺失值。不能有两列都有值的行；其中一列或另一列上都有值，或者两者都没有。
我想创建"new“列，它从任何有数字的列中复制值。真的很感谢大家的帮助！
浏览 17提问于2020-03-14得票数 0
我在Bootstrap 4中有两列，一列有视频，另一列有文本或其他类型的内容：
#video-meta-content {
width: 100%;
height: 500px;
margin: 0;
padding: 0;
border: 3px solid grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="con
浏览 1提问于2018-05-07得票数 0
回答已采纳
我正在构建一个reactJS应用程序，其中导航栏只出现在中间列中。但是当我切换到移动视图时，由于bootstrap的原因，默认情况下导航栏位于第一列的下方。如果我尝试将位置更改为固定顶部，它将扩展到所有列。我需要它在lg和md视图中都在中间，但在小屏幕上它应该在第一列的上方。我附上了一个截图。
如何在我的网站中进行此更改?？
浏览 1提问于2020-12-29得票数 0
1回答
引导程序具有相同高度的列
、、、
我在使用Bootstrap的页面中有两列，但其中一列比另一列大。我想要做的是让两列的高度相同，这样我就可以在底部对齐较短的列的内容。
我读过几种方法，比如margins、flexbox和tables。
我试过flexbox，它适用于更大的屏幕尺寸，但当我使用移动尺寸时，列不会像以前那样堆叠在一起，我在上面添加了flexbox样式。页边距我还没有尝试过，因为它对我来说有点老生常谈。表格--我不知道，我只是不喜欢用表格来布局。
如果你想尝试一下，这里有一个。
HTML
<div class="container">
<div class="row
浏览 0提问于2016-09-30得票数 3
4回答
我正在使用bootstrap为CMS制作一个响应式模板。我希望在主区域中有一个三列网格，但有时，三列中并没有内容。CMS会向任何空的列添加一个类，所以我可以用它来隐藏它们，但我不能让bootstrap展开其他两列来填充该区域。
因此，如果我有三列都是col 4，但其中一列是隐藏的，我基本上希望其他列变成col 6。如果两个是空的，我希望剩下的一个是col 12。但是，我一直没有任何运气。
有什么想法吗？
浏览 1提问于2014-01-25得票数 5
1回答
我有一个模板，其中有两个Bootstrap列。 第一列中有一个由后端填充的表单。这样做的结果是窗体比列宽，并且按钮被推入第二列的区域。 第一列中的按钮部分是可单击的，但第二列中的部分没有响应。 #wrapper{
width: 600px;
margin: auto;
}
#firstColumn{
border: 1px solid orange;
}
#secondColumn{
border: 1px dashed green;
}
form{
background: tomato;
width: 500px;
text-align: righ
浏览 15提问于2020-09-10得票数 0
回答已采纳
1回答
我一直在尝试使用bootstrap列获取3个图像的响应值。它们似乎是响应性的，但问题是除了最后一列仍然正常之外，图像重叠。
<div class="row">
<div class="col-sm-2 offset-sm-3">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
<di
浏览 0提问于2018-12-19得票数 0
1回答
我在bootstrap中调用了两列，假设其中一列的高度为800 PX，然后我希望第二列中的文本在height 200 PX之后开始。我该怎么办？我不想使用填充或边距。在bootstrap中是否有针对它的预定义类？如果有人能帮忙，请帮帮忙。
浏览 30提问于2020-07-08得票数 0
回答已采纳
1回答
在bootstrap 3中有可能有这样的布局吗？
基本上是三列，类容器在中间(第二列)。第一列和第三列应该占据容器和浏览器屏幕之间的剩余空间。
<div> //should be 100% width
<div id="column1"></div>
<div id="column2" class="container"></div> //maxed out at 1170px width
<div id="column3"><
浏览 4提问于2013-12-02得票数 0
2回答
在WPF中设置表单布局
、、、、
我主要指的是表格形式，带有标签列和相应的输入控件。在超文本标记语言中，我们可以使用<ul>、<ol>或我最喜欢的<dl>来耦合标签和输入，使它们成为完整的输入设备。在WPF中，我只能找到一个包含两列的Grid控件，一列用于标签，另一列用于输入。通常需要几个这样的庞然大物来完成表单布局。
WPF中是否没有用于表单布局的完整功能？它是为windows UI窗口设计的，其中很多都是简单的表单，而不是花哨的图形或动画。
浏览 3提问于2014-10-08得票数 0
2回答
请先看一看附图
我想在第一列中使用20%，但当我使用col-md-2时，它设置width: 16.6667%的方式与我使用bootstrap设置列20%的方式相同。我需要自己制作CSS吗?还是有一种方法可以定制bootstraps3？
浏览 0提问于2016-03-03得票数 1
我在推特启动带内有一个表，当表中有很多列(取决于其中的内容)时，它扩展到.container之外。
hr标记(表格下面的灰色线)定义了.container的边缘。这张桌子总是延伸到右边。
是否有可能对表进行居中，使其在.container之外的两边都能平等地扩展？
浏览 2提问于2012-09-23得票数 5
回答已采纳
1回答
我很喜欢Bootstrap tutorials ，但是在前两个教程之后，我意识到它是在V1版本的Bootstrap上工作的，其中布局作为16列网格工作，像span-三分之一类这样的东西仍然是活动的。
我知道我可以下载并使用旧版本的Bootstrap，但(a)我没有那么聪明，(b)我正试图通过使用github fork来尽早采用最佳实践。
我不确定本教程还会有哪些不同之处。我可以弄清楚16列网格和12列网格之间的区别，但是在Bootstrap 1.4和2.0之间有什么东西会让我在学习这些教程时完全搞砸吗？
浏览 4提问于2012-06-30得票数 1
回答已采纳
1回答
我相信这在Bootstrap 3中是可能的，但我不确定如何在Bootstrap 4 (4.1)中实现以下内容。
我想要一列在A下面的C和另一列B，但是在移动设备上，显示ABC。请参见下面的示例图像。
谢谢!
浏览 2提问于2018-04-23得票数 0
2回答
如果我有一个TD(表列)。喜欢
<table>
<tr>
<td>* Name</td>
<td><input type="text"></td>
</tr>
</table>
是否可以在第一列中应用两种样式。就像我想让我的星号看起来是红色的，名字是蓝色的。如果我把它分成两列，那么它是可能的，比如
<table>
<tr>
<td style color="red
浏览 0提问于2012-03-06得票数 0
回答已采纳
我使用的是bootstrap，我有一个包含两列的行。其中一列中有一张图片，它应该占据该列中的所有空间。右边的列有三行，每行有两张图片。但到目前为止，我不能让左边的图像正确调整大小，只是停留在一个小的固定大小。下面是代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
浏览 0提问于2014-07-28得票数 10
回答已采纳
3回答
我有两列，其中一列向左浮动，另一列向右浮动。
右边有输入按钮。
由于某种原因，按钮在列的中间，我希望它们垂直对齐，一直到顶部和右边。
我该怎么做？只是玩填充物吗？
<div id="blah">
<div id="left">
<ul><li></li></ul>
</div>
<div id="right"><input type=image src="" /> <input type=image s
浏览 1提问于2010-03-25得票数 0
回答已采纳
3回答
我需要创建一个网站(两列)，其中一列包含一些文本(垂直居中)，另一列包含图片(粘性到底部)。
两者都需要响应(所以位置:固定不是图像的一个选项)。
我试图通过使用Bootstrap和w3响应框架来实现这一点。但是，他们两人似乎都无法将一个反应灵敏的图像放在一个总是粘在底部的列中。
关于如何在响应时实现这个布局(图片需要调整大小等)，有什么建议吗？
浏览 12提问于2017-07-30得票数 2
回答已采纳
我正在将sql查询的结果数据复制到excel工作表。将数据复制到excel工作表没有任何问题。在其中一列中有一个日期，看起来像00:00.0，但当我双击该列时，它给出了实际的日期格式: 1/25/2019 8:00 AM
我不能双击每一列来填充数据。我们有没有办法做到这一点，因为双击每一列都需要很多时间。
浏览 2提问于2019-02-15得票数 0
1回答
我尝试添加包含两列的行，一列是col-7，另一列是col-5。在col- am添加一个表单，因为我在col7中有问题，其中我试图添加一个使用图像标签的png。我想要的图像是垂直和水平居中的col5，我试图使用mx-auto和my-auto，但没有用。
.rect {
background-color: red;
}
.container {
border: 5px solid #000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twit
浏览 7提问于2021-05-18得票数 0
回答已采纳
2回答
我是新来的。我刚刚用layoutit.com创建了一个示例web应用程序。当我在网站上进行预览时，列是正确对齐的。我使用了md-2和md-10，从而将屏幕划分为2和10的两个布局。第一列有2个网格，从屏幕的最左边开始。请参阅图-1
当我下载该文件并以HTML文件的形式打开它时，第一列有2个网格，左边有更多的空间。即使是有10个网格的第二列，其右侧也有更多的空间。请参考图片-2。
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8
浏览 2提问于2015-06-15得票数 1
回答已采纳
4回答
我有一个表，其中包含一个数字和一个范围值。例如，一列的值为40，另一列的值为100，这意味着从40开始，范围内有100个值以139结尾，包括数字40。我想编写一条tsql语句，将我的数据扩展到单独的行中。
我认为我需要一个cte，但不知道我如何才能做到这一点。
注意:当展开时，我期望7m行。
浏览 1提问于2009-01-21得票数 3
回答已采纳
10回答
我有一个使用Twitter的bootstrap的流畅布局，其中我有一行和两列。第一列有很多内容，我想正常填充跨度。第二列只有一个按钮和一些文本，我希望它们相对于第一列中的单元格进行底部对齐。
这就是我所拥有的：
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall
浏览 53提问于2012-12-12得票数 125
回答已采纳
2回答
我有两个列的行，如下面的片段所示。在列1中，ul标记下有7列表项。
但是我需要向显示第1列中的5个列表项，其余的项应该移到下一列。(即列2)。
如果列表项超过计数( 5)，如何实现基于计数(此处为5)将列表项自动移动到下一列的结果。
并且预期的结果仅在html和css中，不应该有像jquery或任何其他第三方这样的库。
当前片段：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div
浏览 0提问于2018-08-30得票数 1
回答已采纳
我在我的应用程序中使用bootstrap 3.2。我把两个col md-6包装成一排。
其中一栏有一些内容。另一列是空的，我希望另一列的高度与有一些文本的列的高度相同，高度应该是滚动条固定的高度。我不能手动设置高度，因为高度可以更改
请参阅附件中的屏幕截图
浏览 2提问于2014-09-06得票数 0
1回答
我在做一个有反应的项目。我有一个关于移动/xs视图的部分，应该如下所示：
红色方块是切换按钮，蓝色方块是当前显示的图像。
在大屏幕上查看时，我希望更改顺序，使第一行3块红色方块堆叠成一列，并向左浮动，第二行红色方块也被堆叠成一列，并向右浮动，蓝色方块位于中间，如下所示：
我如何用Bootstrap来实现这一点？我知道引导是建立在Flexbox之上的，我需要使用flex属性吗？我刚开始接触Flexbox。理想情况下，我希望在不干扰Flexbox的情况下实现这一点。有什么办法可以用Bootstrap的偏移量来做吗？
很难在大屏幕上将红色方块(最初设置为移动视图中的行)转换为列，
浏览 0提问于2019-08-16得票数 2
回答已采纳
我有一个ChunkRelationship模型，其中有一个表，如下所示：
+----+---------------+----------------+---------------------+---------------------+
| id | chunk_id | chunk_partner | created_at | updated_at |
+----+---------------+----------------+---------------------+---------------------+
| 1 |
浏览 2提问于2014-02-27得票数 0
我需要在bootstrap模式对话框中显示表格，并且我希望有一列是完全透明的-包含复选框元素。该列标题也应该是透明的。
透明列不带头部：
浏览 0提问于2016-02-24得票数 0
2回答
我所要做的就是在图片的右边放一大块文本。快把我逼疯了。包含文本的列一旦文本变得特定大小或没有指定宽度，就会落在图像下方，一种解决方案是向文本列添加宽度，但引导的重点不是不使用固定宽度！？
我在P的css上只有wrap: break-word；我已经在图像上添加了一个高度，因为它太大了-如果可能的话，我想将图像的大小限制为引导列的大小。我尝试了所有不同的css组合。对不起，这可能是一个常见的问题，我已经看到了很多答案，并尝试了所有的答案。如何在一行中创建两列，一列包含图像，另一列包含文本？！这应该很简单！(很可能就是这样！)谢谢你，很抱歉。注意:我在一个laravel项目中，加载了bootstr
浏览 22提问于2020-05-25得票数 0
回答已采纳
3回答
我只是想从bootstrap 3中创建一个定制表。我有点业余，但我已经尝试了一段时间，似乎不能得到它。我需要一个表，其中每行包含两行不同数量的列。这个是可能的吗？
因此，每个条目需要两行；顶行需要4列，底行需要3列。是否可以设置每一列的宽度？还是说这太复杂了？
谢谢。
浏览 0提问于2014-05-23得票数 0
我正在使用最新版本的bootstrap，并有一个2列的设计，其中第一列应该包含一些文本和第二列应该包含一个背景图像，填充到用户的右屏幕上的整个列。我希望背景图像位于右侧的列之外，直到它到达浏览器的边缘。 如下所示： ? 我怎样才能让第二列在容器之外？这就是我目前使用的不能工作的东西(图像被容器截断) <div class="container">
<div class="row">
<div style="" class=&
浏览 8提问于2021-09-20得票数 1
2回答
我有一个游标，它用SQLite表中的值填充列表。
在表中，我有一列类型为text的列，其中包含日期。
我想从表中筛选日期范围内的值。
现在我正在这样做，但它不起作用：
cursor = sqliteDatabase.query("Servicios", null,
"fechaservicioprevista > '01/06/2012' AND fechaservicioprevista < '01/07/2013', null, null,
null, null);
它不显示
浏览 0提问于2012-08-01得票数 1
FlowLayoutPanel发生了非常奇怪的情况...
我一直在动态地向我的面板添加用户控件。此用户控件的高度为105。如果我的FlowLayoutPanelwidth只显示一列控件，那么它将只显示其中的296个控件。其余控件在flowlayoutpanel的底部呈灰色显示。如果我加宽flp以允许两列控件，我可以看到592个控件，其余的在底部灰显。我已经调整了用户控件的大小，使它的高度变短，这在某些方面是有效的(即，当我有两列时，它可以工作，而不是只有一列)，并且可以继续这个变通方法。
所以，我想我的问题是，为什么FlowLayoutPanel会以这种方式运行？似乎(根据我所看到的) FLP
浏览 0提问于2012-01-27得票数 1
回答已采纳
所以，我对proc比较有一个很大的问题。我有两个包含两列的数据集。一列列出表名，另一列列出与第一列中的表名相对应的变量名。我想根据第一列的值比较其中之一的值。我在某种程度上做到了这一点，但问题是，由于其中一个数据集中的附加值，这些数据集具有不同的大小。这意味着在数据集中间添加了一些新变量(将新变量添加到表中)。不幸的是，proc compare水平地比较来自两个数据集的值，并相互检查它们的值，因此在我的例子中，它看起来如下所示：
ds 1 | ds 2
cost | box_nr
other | cost_total
正如您所看到的，向第二个数据集添加了一个新值box_nr，该值出现在我希
浏览 0提问于2014-09-17得票数 0
2回答
我正在开发一个MVC应用程序。其中一页包含一行和两列。 当你调整窗口大小到一定的宽度时，它会自动将第二列放在第一列下面。 我正在使用bootstrap网格系统来实现这一点。 <div class="row">
<div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
...
(Some content)
...
浏览 10提问于2021-02-05得票数 1
我正在处理一个计算列，如果满足特定条件，该列将返回"X“。标准以三列为基础。该表实际上有几列。
COLUMN1 COLUMN2 COLUMN3 DATE
1234 100 300 1/1/2002
2245 100 500 2/3/2002
1234 400 400 4/5/2007
2256 100 500 7/5/2010
1234
如果COLUMN1的
浏览 2提问于2011-11-01得票数 0
回答已采纳
当我使用flex-base: 100%时，我希望有两列和几个块，它们包装到第二列中。下面是我想要的一个例子： .container1 {
height: 50vh;
width: 50vw;
}
.item1 {
height: 10%;
width: 70%;
}
.item2 {
height: 10%;
width: 28%;
}
.item3 {
width: 2%;
}
.break-column {
flex-basis: 100%;
}
.item4 {
height: 10%;
width: 70%;
} <scri
浏览 4提问于2021-02-01得票数 0
我尝试在一行中包含三个div元素。在bootstrap中，这三个div从左到右分别为2列宽、8列宽和2列宽。我有一个容器类div，其中嵌套了一个行类div。在这一行中有三个div。
但是，这些列的跨度不是它们应该跨越的宽度。为了说明我的问题，请看这里：左右的div应该是2列，中间的div应该是8列。
下面是相关的html：
<div class='container' id='asteroid-hub'>
<div class='row'>
<div class='cont
浏览 3提问于2018-10-04得票数 0
我试图使用react-bootstrap-table以表格的形式呈现一些数据，但其中一列的数据与其他列的数据重叠。我想保持我的布局固定，因此添加了css layout:fixed，这实际上也是一个要求。但最终的结果是： ? 实际上，对于这一列，我从后端获得了一个字符串数组。例如：“部门”，“旧”，"CUSTOM_FUNCTION"，...react在内部将其转换为单个字符串，我不确定如何进一步格式化它。 我还在react table文档中搜索：https://react-bootstrap-table.github.io/react-bootstrap-table2/
浏览 22提问于2020-08-11得票数 1
回答已采纳
我尝试在Bootstrap中有两个不相等的列。我希望两边各有一列(因此，如果有从1到12的列，1和12将为空)，column 2~5是一列，6~11是另一列。
我真的找不到这样的例子(除了偏移量)。有人能帮我吗？
浏览 0提问于2015-07-16得票数 27
回答已采纳
1回答
通过引导4，我被要求为桌面定制默认的网格系统，如下所示：
其中，容器和桌面断点为1280 is。
我试过的例子是：
body {
margin-top: 3rem;
}
.l-wrap {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.grid-item {
width: calc((100% - 50px * 11) / 12);
margin-top: 24px;
margin-right: 50px;
float: left;
}
/* For a 3-col
浏览 2提问于2019-06-04得票数 2
回答已采纳
我正在使用react bootstrap，我试图在一行中垂直对齐项目，但没有成功。我的问题是，我在其中一列中有一个按钮，所以对于其他列，所有文本都向上移动了一点，而按钮及其内容具有更大的高度。我的问题是，如何使一行中的所有列都具有相同的高度，并且所有列都垂直对齐？到目前为止，我设法找到的唯一解决方案是使用CSS: tranform: translateY(-50%)这是可行的，但我正在寻找一个更好、更动态的解决方案，因为这需要应用于除按钮列之外的每一列
编辑:当我提到列和行时，我指的是bootstrap的列和行，而不是实际的表或行和列；很抱歉造成了误解
浏览 0提问于2018-09-25得票数 13
回答已采纳
1回答
我试图创建一个两列布局，其中右列是固定的，左列是灵活的，最大宽度取决于父列的宽度。例如，在下面的图表中，我希望右边的列固定在100 it，左边的列将父列的空空间填充到100 it，此时它停止扩展。
对于前三个示例，我可以在table-layout: fixed中使用一个表，但是对于最后一个示例，这是行不通的，因为我似乎无法在第一列上设置一个max-width。
理想情况下，这将是CSS-仅(没有JavaScript)，不使用媒体查询(因为它是基于父，而不是视口)。
如果是相关的，那么第一列本身就是或包含一个表。
编辑：
下面是一些我尝试过但没有成功的代码：
浏览 1提问于2014-11-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
