我试图在一页上加三栏 却在靴子上没有任何间距
这就是我得到的:
"https://i.sstatic.net/ifM1h.jpg" alt="span 失败"/>
这就是我想要的:
"https://i.sstatic.net/iky4E.jpg" alt="span win"/>
这里是我目前使用的代码 :
<div class="row">
<div class="span4 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span4 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span4 blue3">
<h1>span4 (3)</h1>
</div>
</div>
我真的不知道 如何用靴子来达到我想要的 任何帮助都值得赞赏
您可以创建您自己的类, 以删除您 span 网格元素之间的空格 :
<强 > CSS
.no-space [class*="span"] {
margin-left: 0;
}
然后,您可以将它包含在容器 .row div:
<div class="row no-space">
<div class="span3 blue1">
<h1>span4 (1)</h1>
</div>
<div class="span3 blue2">
<h1>span4 (2)</h1>
</div>
<div class="span3 blue3">
<h1>span4 (3)</h1>
</div>
</div>
请注意, .row 集装箱类从左侧删除 20px ,以容纳网格元素,以便你可能不得不删除同样内容:
.no-space {
margin-left:0;
}
玩玩看什么是有效的。
德莫:http://jsfiddle.net/G36uQ/" rel="nreferrer" >http://jsfiddle.net/G36uQ/
完整类, 覆盖. row- fluid, 加上. no- space 。
/*
* Bootstrap Grid System without space
*
* Overwrite Bootstrap grid system, removing margin
* Usage :
* Simple add no-space class with row-fluid
* <ul class="row-fluid no-space"> ... </ul>
*/
.row-fluid.no-space [class*="span"] {
margin-left: 0%;
*margin-left: -0.06944%;
}
.row-fluid.no-space [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] {
margin-left: 0%;
}
.row-fluid.no-space .span12 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid.no-space .span11 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid.no-space .span10 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid.no-space .span9 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid.no-space .span8 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid.no-space .span7 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid.no-space .span6 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid.no-space .span5 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid.no-space .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid.no-space .span3 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid.no-space .span2 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid.no-space .span1 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
.row-fluid.no-space .offset12 {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset12:first-child {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.row-fluid.no-space .offset11 {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset11:first-child {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.row-fluid.no-space .offset10 {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset10:first-child {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.row-fluid.no-space .offset9 {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset9:first-child {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.row-fluid.no-space .offset8 {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset8:first-child {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.row-fluid.no-space .offset7 {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset7:first-child {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.row-fluid.no-space .offset6 {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset6:first-child {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.row-fluid.no-space .offset5 {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset5:first-child {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.row-fluid.no-space .offset4 {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset4:first-child {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.row-fluid.no-space .offset3 {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset3:first-child {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.row-fluid.no-space .offset2 {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset2:first-child {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.row-fluid.no-space .offset1 {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
.row-fluid.no-space .offset1:first-child {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
<强 > 用户 :
<ul class="media-list row-fluid no-space">
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
<li class="media span4">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
<div class="media">
...
</div>
</div>
</li>
</ul>
为此原因,我添加了: offoffsecomet0
.row-fluid .offset0 {
margin-left: 0
}
.row-fluid .span12.offset0 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.row-fluid .span11.offset0 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.row-fluid .span10.offset0 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.row-fluid .span9.offset0 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.row-fluid .span8.offset0 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.row-fluid .span7.offset0 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.row-fluid .span6.offset0 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.row-fluid .span5.offset0 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.row-fluid .span4.offset0 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.row-fluid .span3.offset0 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.row-fluid .span2.offset0 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.row-fluid .span1.offset0 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
您看到的列间距是网格系统的一个意图。
如果您希望在列间没有空格, 您应该直接对这些元素进行样式, 而不是使用网格布局样式 。
如果您正在使用较少的文件来生成靴套 cs, 请在变量中设置@ gridGutterWidth 到 0 。 无变量文件。 否则的话, 我想更改 cs 文件中的所有边距和折叠是一个真正的痛苦 。
如果您在靴子陷阱中检查网格. less file, 区域* 网格的定义是简单的混音:
#grid > .core(@gridColumnWidth, @gridGutterWidth);
要构建一个没有空格的网格, 您可以少用 :
.my-nospace-grid {
#grid > .core(78px, 0px);
}
这将给 12*78px = 936px 12*78px = 936px 。
要选择您的值,请检查变量中定义的默认大小。 less:
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
我的问题和你的问题完全一样, 所以这里是 我是如何通过这个 最新的布兹陷阱2.3.1版本:
首先,您需要在父 div 中添加“ 无空间” 类, 并使用这样的类“ row ” :
<div class="row-fluid no-space">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
然后您根据该行中您想要的元素数量修改 cs, 像这样 :
.no-space [class*="span"]{
margin-left: 0 !important;
width: 25% !important; // This is for 4 elements ONLY in the row
}
宽度的数学是:
100 / number of elements in the row = width.
就我而言,它有四个元素 所以它就是:
100 / 4 = 25%;
如果是3个要素,就是:
100 / 3 = 33.3333333333%;
如果您在项目中有多个案例存在这一问题, 可能需要在 cs 规则中添加一个独一的 id 或类, 这样它就不会影响它们全部 。
That s it. No need to redownload the bootstrap and to deal with source files
PS: This method works in responsive design as well ;)
我有一排有两列。三列有3列, 相应调整。 我将这个加到我的. cs 上, 之后再加, 从而压倒了靴子。 cs. cs 。
.no-space { /*apply to the row */
left-margin:0;
}
.row-fluid .span6 { /* overrides bootstrap.css to allow for no gutter */
/* width: 48.051948051948045%;
*width: 48.008658008658%; */
width: 50%;
*width: 50%;
}
html是:
<div class="row-fluid no-space"> <!-- r -->
<div class="span6">
<h4 class="titles">xxx</h4>
<img src="img/system/xxx.png">
</div>
<div class="span6">
<h4 class="titles">xxx</h4>
<img src="img/system/xxx.png">
</div>
</div><!--/r-->
现在,我有两列,宽度50%,两列之间没有沟渠。
一般来说,如果您仍然想保持排水沟,但只是想要缩小或扩大它,而不会在最右边造成差距,那么只要确保相关的边距和宽度增加100%,同时铭记边距和宽度不适用于最左边的宽度。因此,对于您的三列布局,如果您想要,比如,0.5%的排水沟,那么选择 3*33% + 2*0.5% = 100%
.row-fluid .span4 {
width: 33%;
margin-left: 0.5%;
}
<div>
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div style="background:#000;" class="span6">testcont 1</div>
<div style="background:#000;" class="span6">testcont 2</div>
<div style="background:#000;" class="span6">testcont 3</div>
<div style="background:#000;" class="span6">testcont 4</div>
</div>
</div>
</div>
</div>
</div>
下面是有空间和没有空间的同等宽度柱的例子:http://codepen.io/ngeorgiev/pen/Lgxin/
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!