似乎无法减少Bootstrap中的列宽
在Bootstrap中，列的宽度可以通过使用不同的CSS类来调整。如果你想要减少列的宽度，可以使用col-*类来指定列的大小，其中*代表一个数字，表示列所占据的宽度比例。
Bootstrap的栅格系统将页面水平分为12个等宽的列，每个列可以占据不同的宽度比例。默认情况下，列的宽度是平均分配的，即每个列占据1/12的宽度。
如果你想要减少列的宽度，可以使用较小的数字来代替*，例如col-6表示列占据页面宽度的一半，col-4表示列占据页面宽度的1/3。
以下是一些常用的列宽度类：
col-1：列占据页面宽度的1/12col-2：列占据页面宽度的1/6col-3：列占据页面宽度的1/4col-4：列占据页面宽度的1/3col-6：列占据页面宽度的1/2col-8：列占据页面宽度的2/3col-9：列占据页面宽度的3/4col-12：列占据页面宽度的全部
通过使用这些类，你可以根据需要调整列的宽度，以实现布局的灵活性和响应式设计。
腾讯云的相关产品中，可以使用云服务器（CVM）来搭建和管理你的网站或应用程序。你可以通过以下链接了解更多关于腾讯云云服务器的信息：腾讯云云服务器
希望以上信息能对你有所帮助！
相关·内容
2回答
我有一个网页模板，我正在使用的顶部和左导航，我想有三列元素左对齐。即使在中，列也需要居中对齐。
有没有人能告诉我怎么把这些列贴到左边距？
*免责声明-我正在学习Bootstrap，所以我自己回答这个问题的能力可能受到我的Bootstrap词汇表的限制。
我尝试了一系列不同的搜索方法，并将其作为最相关的搜索查询: bootstrap left align columns -nav -navbar
那次搜索产生了答案，但似乎没有解决我的问题，或者我做得不对。
我已经创建了一个模拟我的问题的，所以如果有人想要尝试它，他们可以。
浏览 3提问于2016-09-07得票数 2
回答已采纳
我需要显示完整的列表头名称，当列被选中时，它意味着增加列宽。并在取消选择列时重置宽度。我在nattable_examples.exe中找不到示例。有没有内置的功能？
浏览 36提问于2021-04-14得票数 0
，我们有一个要求，在桌面上我们需要12列网格，但在平板电脑上它应该遵循8列网格。我们想知道这在Bootstrap中是否可行。如果是，我们该如何做？
浏览 1提问于2017-09-22得票数 0
1回答
如何在WinForms中设置DataGrid上的列宽
在DataGridView中，我通常在列上使用AutoSizeMode，但在DataGrid中似乎无法做到这一点。
我找到的唯一属性是PreferredColumnWidth，但这会改变所有列的宽度。
浏览 2提问于2016-12-07得票数 0
1回答
我开始迷失在整个Bootstrap/flexbox网格系统中。我正在尝试实现一个动态的2列布局，其中包含一个大的col-sm-12.col-md-12.col-lg-8和两个小的列：col-sm-12.col-md-6.col-lg-4
这就是我想要的大屏幕：
这个就是中等尺寸的屏幕：
但是，这就是我所得到的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="wi
浏览 6提问于2017-11-21得票数 1
1回答
我正在使用Bootstrap表创建一个类似电子表格的应用程序。用户可以切换列可见性、添加/删除列、调整大小等。
我需要表格能够在用户选择调整列大小时水平滚动，以及添加新的列，但Bootstrap尝试将表格放入父容器。基本Bootstrap表：
<div class="wrapper">
<table id="grid" class="table">
<thead>
<tr>
<th>One</th>
<th>Two&l
浏览 2提问于2016-05-08得票数 6
3回答
我必须创建一个数据库来存储发送和接收到/来自第三方web服务门户的信息。需要发送的信息字段大约有150个，不过我可以通过规范化来删除其中大约50个字段(例如，有三组地址可以保存在一个地址表中)。但是，这仍然留下了一个可能有100列的表。
我想出了两种方法来处理这个问题，但我不确定该使用哪种方法：
1。有一个具有100列和三个地址表引用的表。
2。把它分解成15到20张单独的专用桌子。
选项1似乎是最快的，因为它涉及最少的联接，但是有100列的表的想法是不正确的。
选项2感觉更好，可以分解成更可管理的块，但是它不会节省任何数据库空间，并且会增加联接的数量。数据库中的几乎所有列都有一个值，我无法进
浏览 3提问于2013-05-31得票数 6
回答已采纳
2回答
我目前正在使用Yahoo user interface (YUI)网格进行布局。在一个(例如) 1350px的布局中，居中并没有什么大惊小怪的。然后我可以添加300px的左侧nav列和1050px的右侧主列。
我喜欢Twitter Bootstrap的外观和感觉。我想尝试一下完整的包(只使用我需要的控件)。我想从布局开始。我试着找到关于如何将宽度设置为我需要的宽度的文章。如何将宽度设置为1350px之类的值。或者1500px宽。我不想让宽度根据屏幕的宽度自动调整。我不介意浏览器底部的滚动条。左边的导航是300px，其余的用来填充1050px。
这样的事情在Bootstrap中是可能的吗？与其他
浏览 9提问于2013-05-14得票数 0
3回答
下面是带有引导类的php (在我的wordpress主题的single.php文件中)
<?php get_header(); ?>
<button class="btn-danger">Hello Bootstrap World</button>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div
浏览 0提问于2018-08-22得票数 0
回答已采纳
我试图让迭代通过rails创建卡片，网格在3，然后新行等使用每个。目前，卡只垂直堆叠。我希望它们在3列中，然后在屏幕变小时调整大小以堆栈。
目前，我的代码如下所示：
当我使屏幕变小时，它似乎变成了像这样的3x3：
有人能帮我/建议我哪里出了问题吗？
目前使用Bootstrap v5.2.2
提前感谢！
<div class="card text-center text-white row row-cols-3 row-cols-md-3" style="background-color:#ffa82e00;">
<% @drinks.eac
浏览 1提问于2022-11-06得票数 0
回答已采纳
我在网页上有一个，但是由于类的原因，引导程序应该在10列上扩展内容。
偏移量由Bootstrap正确设置，在内容开始前有2列。
也许问题不在于Bootstrap，而在于CSS，我不能说我只是在学习。
非常感谢您的帮助！
浏览 0提问于2018-10-20得票数 1
2回答
列不会水平堆叠在单行中
、、、、
第二列中的图像一直堆叠在第一列的下方，而不是页面的右侧。我已经盯着它两个小时了。我使用的是codepen，所以我在后台预装了bootstrap。
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>George Washington</h3><br>
<h3>Montana State Quarter</h3><br>
浏览 0提问于2017-02-27得票数 0
1回答
我正在做一个bootstrap 4，4列布局。我从3列开始。我有一个外部div容器，和一个包含3列的内部行。当我将边框添加到所有容器时，我可以看到行不会伸缩以填充整个父容器div。我已经尝试了许多CSS属性，但我似乎就是弄不明白为什么它不能扩展以适应父容器。理想情况下，我希望看到中心列的宽度是100%减去其他两列(其中有箭头图像)的总和。查看jsfiddle以查看代码和结果呈现。 (主要)完整代码： https://jsfiddle.net/ukd5stc0/ stackoverflow所需的代码示例： <div class="container touchpointConta
浏览 11提问于2020-08-12得票数 1
回答已采纳
1回答
*编辑*
意外错误的图片被上传到独立的案例。现在改正
*编辑*
我无法设置列的宽度(用col-)和iframe。CSS选择器似乎完全被忽略了。如果请求作为独立的页面(而不是iframe)，相同的页面将按预期工作。请看附图。
独立的：
在iframe内：
浏览 3提问于2015-04-15得票数 0
回答已采纳
1回答
我使用CSS列，如：
HTML:
<div class="foo">
<div class="content">
</div>
</div>
CSS:
.content {
column-count: 2;
}
但是，在使用column-width时，我希望列的宽度不同。
有可能吗？我想也没办法用百分比吧？
浏览 1提问于2015-11-24得票数 1
回答已采纳
我尝试使用<code>D0</code>在<code>D1</code>中移动单个列，但在下面的示例中无法正常工作。单元格选择会被打乱，列宽也不会移动。使用相同的逻辑移动行似乎工作正常。我做错了什么？
视频：<code>C2</code>
<code>A3</code>
浏览 31提问于2021-06-12得票数 0
回答已采纳
2回答
我是新手使用Bootstrap，我想创建一个响应式布局，有2列并排为我的帖子。
我想实现2列的安排下看到的投资组合。我已经查看了源代码，看到了标准Bootstrap中似乎没有包含的各种类。我使用的是VS2013中的MVC6项目附带的Bootstrap版本。在正确的方向上，任何帮助或推动都是值得感谢的。
我的date尝试导致了的发生。我最终得到了差距。
下面是我的MVC代码，它导致了间隙的出现：
<div class="container">
@For Each item In Model.ToList
浏览 0提问于2014-07-09得票数 0
1回答
我正在使用Photoshop，创建一系列的线框，为未来的eCommerce网站。
据我所知，Bootstrap是在“12栏”基础上运作的。每个列的宽度取决于正在查看的设备。
当我浏览Bootstrap的网站时，我看到了这样的图片：
我现在的线框是360 of的屏幕宽度。为了计算列的宽度，我将360 as除以12，达到30 as。通过分解上面图像中显示的30 0px的Gutter宽度，留给我的是0px，以便将内容放在列中。
我这是怎么回事？我想在移动设备上计算每一列的宽度。
浏览 1提问于2018-01-31得票数 1
回答已采纳
1回答
我不确定这是一个引导错误，还是我只是不了解网格系统。我希望两个标题(这个家伙，那个家伙)对齐：
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div
浏览 2提问于2017-03-16得票数 0
回答已采纳
我像往常一样连接了Bootstrap 3，但当我测试页面时，col在中等屏幕上不工作，它在大屏幕上工作。问题出在哪里？它在页面中的所有列中重复，我还注意到它需要容器的整个宽度 <div class="container">
<div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
<div class="col-md-4"
浏览 28提问于2018-12-30得票数 0
回答已采纳
由于bootstrap删除了v3.0中的*fluid css类，因此我找不到一种构建两列fluid布局的方法。我们的目标是实现类似于旧文档中的Fluid布局示例的布局：
浏览 2提问于2013-10-08得票数 38
回答已采纳
3回答
我有两个按钮在页面上。根据，该页面被划分为12列。我希望这两个按钮是4列宽，但从第2列到第5列，第二个按钮从第8列到第11列，我如何做到这一点？我正在使用引导程序来完成这个任务。
使用空的'p‘元素似乎不起作用，如下所示。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/j
浏览 2提问于2020-02-14得票数 1
回答已采纳
1回答
我是新手Bootstrap，目前正在修改一个网站。
我的目标是添加新的列，已经完成了。但它将最后一列推向了包装。
下面的图片解释了我的期望
谢谢
浏览 0提问于2018-08-14得票数 0
我有一个react组件，在选项卡窗格中列出了其他组件的网格，所有这些组件都来自react-bootstrap，并包含在一个div中，该div具有bootstrap的漂亮的中心填充容器。不幸的是，Tab中的Grid似乎认为它应该一直延伸到屏幕的右边。我怎样才能确保它在父div的宽度内？
下面是代码的要点：
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
浏览 1提问于2016-04-01得票数 2
3回答
我有一个表单布局，上面有bootstrap 3表单组。我希望这些表单组在<小的单列中，2列在平板电脑大小上，4列在较大的屏幕上。
我看起来工作得很好，但是在读了这里之后，我的所作所为似乎违反了假设的规则，即一行中的每一列的总和必须是12。然而，我能找到的每个教程和文档在说应该加到12的时候总是使用像“应该”或“理想”这样的黄鼠强词。这里似乎没有明确的指导。
我这样定义我的组：
<div class="row">
<div class="form-group col-md-6 col-lg-3" ><!--....etc
浏览 0提问于2014-05-07得票数 25
回答已采纳
我非常喜欢0.28中的新缓冲区支柱，它允许您禁用/启用水平滚动。然而，当我尝试使用它时，我似乎无法让它发挥作用。知道下面的代码有什么问题吗？谢谢你看一看！
<Timeline
groups={groups}
items={items}
stackItems
itemHeightRatio={0.85}
canMove={false}
浏览 21提问于2022-09-07得票数 1
回答已采纳
在火狐的DataTables中似乎有一个bug，在那里左边框缺失，底部边框对于表格中的最后一个<th> </th>列具有双倍宽度。见附图。
浏览 1提问于2015-06-15得票数 0
1回答
我试图从中推断出表的结构；
到目前为止，我已经识别了"re“操作符并得到了大部分的结构，但是虚线(例如链接中的第二列和第三列之间的垂直线)似乎无法提取。它们似乎不是来自h/l/m运算符。
讨论了一种“线段模式”，这似乎正是我所需要的，但据我所知，这是一个应用于路径的参数，因此如果我能够得到h/l/m运算符，解析器应该正确地识别这些行。
有人能帮我解释一下我在这里可能错过了什么吗？谢谢
浏览 3提问于2015-05-06得票数 1
回答已采纳
我打算将一些信息从C#写到Excel中。我使用的代码是：
var oXL = new Microsoft.Office.Interop.Excel.Application();
oXL.Visible = false;
var oWB = (Microsoft.Office.Interop.Excel._Workbook)(oXL.Workbooks.Add(""));
var oSheet = (Microsoft.Office.Interop.Excel._Worksheet)oWB.ActiveSheet;
oSheet.Columns.ColumnWidth = 5;
浏览 4提问于2016-11-03得票数 3
我希望有人能帮助我，我对此有点困惑，我一直使用960网格系统。使用Twitter Bootstrap进行响应式设计，请参阅我遇到的问题是twitter网站上的桌面视图显示
标签布局宽度列宽度间距宽度大显示屏1200px和70px 30px默认980px和60px 20px纵向平板768px和以上42px 20px手机到平板767px及以下流体列，无固定宽度手机480px及以下流体列，无固定宽度
当然它应该是默认的960px或更高？60*12 + 20* = 960px？
我是不是遗漏了什么，或者只是需要使用定制器？
基本上，我的PSD的大小应该仍然是940px (像往常一样)？或者应该是960
浏览 0提问于2013-01-18得票数 0
回答已采纳
1回答
Bootstrap 3提供4列网格吗？基本上是-md-2。我想只有1，3，4，6，8，12？
如果不是2号，还有其他方法来构建4列网格吗？
浏览 5提问于2014-12-17得票数 0
回答已采纳
1回答
下面是一些关于将记录返回到表单列表框的一般格式问题：
我有一个列表框，它根据VB中的SQL语句返回一组记录。我需要SQl语句返回每条记录的ID (自动编号)，因为如果用户从该列表框中进行选择，我需要将该ID作为传递参数传递到下一个表单。但我不需要的ID显示在实际的list....anyway我可以隐藏这一点，或只是不显示它？
我像这样使用了rowsource：
me.searchlist.rowsource = "SELECT TblMain.MainID, TblMain.First, TblMain.MiddleTblMain.Last FROM TblMain ORDER BY
浏览 3提问于2009-12-14得票数 0
回答已采纳
我需要在bootstrap中有一个部分，其中有两列(6和6)在一行。
左侧6列div需要具有流体效果，其中包含延伸到浏览器窗口的左边缘。
右侧的6列div需要将其内容匹配/保持在页面的其他部分的右侧范围内，这些部分具有正常(非流体)容器类(宽度为1170px)。
我怎样才能最好地达到这个效果？
浏览 16提问于2017-12-14得票数 1
我正在使用bootstrap，并且刚刚发现我的bootstrap列似乎有内置的填充和边距。如何删除默认值？例如，在我附加的示例中，我想a)将橙色和蓝色部分之间的距离减少到0px，b)删除左边和右边的空白处。
浏览 1提问于2016-04-02得票数 3
在bootstrap v3中，针对不同的屏幕大小声明列大小。
<div class='container'>
<div class='row'>
<div class='col-md-6 col-lg-6 col-sm-6'>
我经常发现自己只需要一个尺寸就可以显示所有类型的显示器。我想这应该是这样的
<div class='col-6'>
无论用户的显示尺寸是什么，只要保持网格系统的列6/12的宽度即可。但这似乎行不通。我遗漏了什么？
浏览 0提问于2014-01-31得票数 24
3回答
我有一张三列的桌子
**********************************************************
* Name * Description * Actions *
**********************************************************
* John * Lorem ipsum bla bla etc eetc * B1 *
* * * B2
浏览 1提问于2015-04-17得票数 9
回答已采纳
我想要将某些选定列的列宽精确设置为1英寸。然而，我很难弄清楚SSG用来设置列宽的单位。
我试过" points“，即1英寸= 72分。但在本例中，列宽超过1英寸。
double colWidth = 1; //1 inch
IRange selectedRange = workBookViewControl.RangeSelection; //this has the columns needed to change the width
selectedRange.ColumnWidth = colWidth * 72; //72 is the conversion of inch
浏览 1提问于2014-03-13得票数 1
2回答
我刚从Bootstrap开始，正在看医生。现在，似乎非常混乱，有些疑问如下：
在表中，为什么容器宽度总是小于设备宽度，为什么不等于e.g.Small设备平板(≥768≥)的设备宽度。
宽度750 is是如何确定的，为什么不是743 is或755 is或任何其他大小。他们是如何确定750 as作为容器宽度的。
在给定的情况下，引导标度可达12列，每列宽度为62 12，沟槽为30 12(两侧为15 12)，因此(12(cols)*62px )+(11(沟)*15(宽度))等于909 12，而不是给定的750 12容器宽度。为什么？
这一切都让我很困惑。是否有人请说明如何计算不同
浏览 1提问于2015-06-01得票数 1
回答已采纳
当我在python中使用xlsxwriter的自动过滤功能时，我的列宽设置不起作用。有什么办法吗？
浏览 2提问于2014-07-18得票数 1
5回答
我认为这是很简单的东西，但由于我刚接触bootstrap，我不知道怎么做，我搜索了一下，没有找到任何关于它的东西。
我希望列占行宽度的100%，在下面的示例中，我用红色边框标记了行。
我知道是列的填充提供了这种间距，但我还没有想出一种方法来删除填充，保持列之间的间距，并使它们填充一行。
.box {
height: 100px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
浏览 2提问于2017-07-08得票数 1
我使用具有动态列的tablix来显示测试数据，并且可以有100+列的数据。报告运行良好，但打印效果很差，有很多空白。
有没有一种方法可以让Tablix在没有新页面的情况下以页面宽度换行？该报告嵌入在.Net 4应用程序中。
浏览 0提问于2011-08-10得票数 0
回答已采纳
我在一个角度的项目中使用了引导带。我在页面上的许多元素中使用Bootstrap mt-4类，每个元素包装一个表单控件及其标签和验证消息。我决定通过将mt-4替换为form-item来封装它，并在SCSS文件中设置这些项的样式：
@use '/node_modules/bootstrap/scss/bootstrap-grid.scss';
.form-item {
@extend .mt-4
}
这台机器在我的本地机器上运行得很好。但是，当我在构建服务器上构建它时，我得到了以下消息：
Error: /app/src/app/views/xyz/xyz/xyz-edit.c
浏览 5提问于2022-07-05得票数 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 2的项目，我习惯了使用Bootstrap 3，但以前从未使用过版本2。
我已经阅读了一些关于这些差异的内容，据我所知，这些列是通过使用span*来工作的，其中*指示了您希望该元素跨多少列。
但是，我对如何根据不同的断点来改变这一点感到困惑？
例如，在Bootstrap 3中，可以这样做：
col-sm-4
col-md-8
如何在Bootstrap 2中更改这样的元素？
浏览 1提问于2015-10-18得票数 1
回答已采纳
2回答
我正在尝试使用bootstrap创建一个有一点奇怪背景的布局。
对于内部页面，它被分成两个不相等的列7列和5列，左列需要白色背景&左列需要浅灰色背景。无论大小如何，这两种背景都需要延伸到浏览器视口的边缘。下面是一个不起作用的示例：
当你开始调整浏览器窗口的大小时，问题就变得很明显了--右边的列背景应该保持在文本后面的位置。
我不确定如何正确处理这件事。有什么想法吗？
浏览 3提问于2013-10-29得票数 0
我正在尝试创建一个电子表格，其中每列都有一个最小宽度，但在设置中同时设置colWidths和autoColumnResize似乎会否定自动调整列大小的功能。
var hot = new Handsontable(container,{
data: data,
colWidths:100,
autoColumnResize:true // negated by the colWidths setting
});
如果我删除colWidths设置，列的大小可以正常调整。
浏览 2提问于2016-09-22得票数 1
2回答
有没有办法让一个CSS类在本质上执行这些命令以及另一个类的命令？ 用例是我有一个使用Bootstrap的两列站点。目前，我不确定相对宽度是多少，如果能够在SCSS文件中的一个位置更改它，而不是转到left-column和right-column的每个实例并添加所需的bootstrap类，那就太好了。
浏览 31提问于2019-05-16得票数 0
我正在使用一个bootstrap包装，并试图建立一个注册页面，看起来有点像样。我以为我设置了正确的样式，但是当我重新缩放页面时，我调整了表的大小，发现表没有响应。
我知道在bootstrap3中他们添加了表响应性，但我不能在这个特定的包装中使用它。bootstrap2中有什么技巧可以帮助解决这个问题吗？
这是我正在与合作的jsFiddle
我尝试了一些方法，比如添加span类，但在all...it中似乎没有什么帮助，反而把它搞得乱七八糟。
浏览 0提问于2013-08-22得票数 0
如果我将文本体放置到一个具有设置高度和隐藏溢出的容器中，我通常会最终得到适合被切断的最后一行。或图像：
有没有办法使这条线不完全出现，而不是发生这种情况？
情况是，我有一个动态高度(100%的父级高度，即80%的身高)包含博客帖子文本的列，如果有溢出的文本(很容易确定)，我想在底部显示一个"read“。此刻，它看起来糟透了，一半的渲染文本就在上面。
我无法删除溢出，因为列需要在导航之前结束，导航位于页面底部。
浏览 12提问于2012-08-29得票数 14
回答已采纳
1回答
我正在研究这张纸，它在N-Q列之间有很多ImportXML请求。
而且，由于请求的数量很大，ImportXML函数似乎无法正常工作(它一直在大多数单元上加载)。
因此，作为初学者，我想知道是否有任何方法从不同的URL(基于E列中的数据)导入XML数据，而不提出这么多请求？既然我真的需要从不同的URL导入大量数据，那么解决这个问题的最佳方法是什么？
浏览 0提问于2019-07-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
