引导程序行之间的垂直空间 [英] Vertical space between bootstrap rows
本文介绍了引导程序行之间的垂直空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我正在设计布局，为了获得响应能力，我决定使用Bootstrap。现在我猜想网格系统有问题。
我想要的结果如下：
| ----------- | | --------------------------------- |
| 1 | | |
| ----------- | | |
| 4 |
| ----------- | | |
| 2 | | |
| ----------- | | --------------------------------- |
| ----------- |
| 3 |
| ----------- |
但这没有发生。发生的是，我在框1和框2之间得到了一个不愉快的垂直空白，一直持续到框4的末尾。在此处查看一个真实的示例：
这就是发生的情况。框1和2之间的间隔一直持续到框4的结尾。
这是我的HTML：
< div class = row>
< div class = col-md-4 nopadding leftnews>
< div id = radio>
< audio id = radio-audio控件= autoeplay = preload = none
< source src =＃ type = audio / mpeg
< / audio>
< div id = stats style =" background-image：url（’assets / img / test.png’）;<>
< span class = dj-name> *****< / span>
< span class =听者> 30< / span>
< span class =歌曲>字幕ID =歌曲>凯蒂·佩里（Katy Perry-想到你）（原声版）// marquee< / span>
< / div>
< div id = player>
< div class = volume>
<输入名称=音量控制； id = volume-control type =范围 min = 0 max = 99值= 100步骤＝ 1。 onchange ＝ volumeUpdate（value）。
< / div>
< img id =音频更新 src = assets / img / radio_update.png alt =。
< div id = audio-play class = radio-control // div
< div id = audio-pause class = radio-control // div
< / div>
< / div>
< / div>
< div class = col-md-8 nopadding>
< div class = panel panel-default panel_big>
< div class = panel_top_orange< / div
< div class = panel-body>
Lorem ipsum dolor坐在amet，管教adipiscing精英。 Aenean commodo ligula eget dolor。马尼拉（Aenean Massa）。兼收并蓄的蒙太奇，纳斯提尔ridiculus mus。 Donec quam felis，neculies nec，pellentesque eu，pretium quis，sem。 Nulla等于massa quis enim。 Donec pede justo，fringilla vel，aliquet nec，vulputate eget，arcu。在enim justo，rhoncus ut，imperdiet a，venenatis vitae，justo中。 Nullam dictum felis eu pede mollis pretium。整数Tincidunt。 Cras dapibus。 Vivamus elementum semper nisi。埃内斯（Aenean）狐臭的eleifendtellus。 Aenean leo ligula，porttitor eu，consequat vitae，eleifend ac，enim。 Aliquam lorem ante，dapibus，viverra quis，feugiat a，tellus。菜豆（Phasellus viverra nulla ut metus varius laoreet）。 Quisque rutrum。艾妮（Aenean）卑鄙。 Etiam ultricies nisi vel augue。 Curabitur ullamcorper菌类。 Nam eget dui。
< / div>
< / div>
< / div>
< / div>
< div class = row>
< div class = col-md-4 nopadding>
< div class = panel panel-default panelsmall>
< div class = top_rooster>
< span>公鸡< / span>
< / div>
< div class = panel-body>
< div id = rooster>
< table style = width：265px;>
< tr class =当前 title = 11:00-13:00 data-toggle =工具提示>
< td>
< img src =" assets / img / test.png"样式=位置：相对； top：-5px;" />
< / td>
< td class = nu> b< NU< / b> ;：< / td>
< td> < / td>
< td class = djnu> ****< / td>
< / tr>
< tr title =" 12：00-13：00" data-toggle =工具提示>
< td>
< img src =" assets / img / test.png"样式=位置：相对； top：-5px;" />
< / td>
< td class = nu" HIERNA：< / td>
< td> < / td>
< td class = dj> ****< / td>
< / tr>
< tr title =" 13：00-14：00" data-toggle =工具提示>
< td>
< img src =" assets / img / test.png"样式=位置：相对； top：-5px;" />
< / td>
< td class = nu> STRAKS：< / td>
< td> < / td>
< td class = dj> ****< / td>
< / tr>
< / table>
< / div>
< / div>
< / div>
< / div>
< / div>
快速回顾一下代码：
我在该行中有一行，有一个 col-md-4 指向方框1。然后在同一行中有一个 col-md-8 指向框4。
在该行下，有一个新行，其中包含 col-md-4 （框2）。
如何修复该死的空间？真的很烦人。
谢谢。
（很抱歉，如果我写了一个模糊的问题。我试图尽可能地理解
解决方案
为什么不将屏幕分为两列：.col-md-4和col- md-8，然后将第1、2和3格的内容放入左栏中？一个屏幕小于 md 的屏幕将使盒子在 .container 中的排列比例为100％。
.box {边框：1px实心＃c66;背景颜色：＃f99;底边距：15px;高度：100px；行高：100px;颜色：#fff;字体家族：Helvetica，Arial，无衬线；字体大小：48px； text-align：center;}。box--high {height：250px;行高：250px;}
< link href = http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css rel = stylesheet />< div class = container> < div class = row> < div class = col-md-4> < div class = box> 1< / div> < div class = box> 2< / div> < div class = box> 3< / div> < / div> < div class = col-md-8> < div class = box box--high> 4< / div> < / div> < / div>< / div>
So I'm working on a layout, and for 'responsiveness' I decided to use Bootstrap. Now I'm having a problem with the grid system I guess.
The result that I want is the following:
|-----------| |---------------------------------|
| 1 | | |
|-----------| | |
| 4 |
|-----------| | |
| 2 | | |
|-----------| |---------------------------------|
|-----------|
| 3 |
|-----------|
But that didn't happen. What happend is that I got an unpleasant vertical whitespace between box 1 and box 2, which lasts until the end of box 4. See a real life example here:
That's what happens. The space between box 1 and 2 spans until the ending of box 4.
Here's my HTML:
<div class="row">
<div class="col-md-4 nopadding leftnews">
<div id="radio">
<audio id="radio-audio" controls="" autoeplay="" preload="none">
<source src="#" type="audio/mpeg">
</audio>
<div id="stats" style="background-image: url('assets/img/test.png');">
<span class="dj-name">*****</span>
<span class="listeners">30</span>
<span class="song"><marquee id="song">Katy Perry - Thinking Of You (Acoustic Version)</marquee></span>
</div>
<div id="player">
<div class="volume">
<input name="volume-control" id="volume-control" type="range" min="0" max="99" value="100" step="1" onchange="volumeUpdate(value)">
</div>
<img id="audio-update" src="assets/img/radio_update.png" alt="">
<div id="audio-play" class="radio-control"></div>
<div id="audio-pause" class="radio-control"></div>
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="panel panel-default panel_big">
<div class="panel_top_orange"></div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 nopadding">
<div class="panel panel-default panelsmall">
<div class="top_rooster">
<span>Rooster</span>
</div>
<div class="panel-body">
<div id="rooster">
<table style="width:265px;">
<tr class="current" title="11:00 - 13:00" data-toggle='tooltip'>
<td>
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu"><b>NU</b>: </td>
<td> </td>
<td class="djnu"> ****</td>
</tr>
<tr title="12:00 - 13:00" data-toggle='tooltip'>
<td>
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu">HIERNA: </td>
<td> </td>
<td class="dj"> ****</td>
</tr>
<tr title="13:00 - 14:00" data-toggle='tooltip'>
<td >
<img src="assets/img/test.png" style="position: relative; top:-5px;" />
</td>
<td class="nu">STRAKS: </td>
<td> </td>
<td class="dj"> ****</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Quick recap of the code:
I have a row, in that row, there's a col-md-4 which points to box 1. Then in the same row, there's a col-md-8 which points to box 4.
Under that row, there's a new row which contains a col-md-4 (Box 2).
How the fix the damn' space? It's really annoying...
Thanks.
(I'm sorry if I wrote a vague question. I tried to make as much sense of it as possible)
解决方案
Why don't you divide the screen into two columns, .col-md-4 and col-md-8, and put the contents of box 1, 2 and 3 into the left column? One screens smaller than md this would make the boxes 100% of the .container and in ascending order.
.box {
border: 1px solid #c66;
background-color: #f99;
margin-bottom: 15px;
height: 100px;
line-height: 100px;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 48px;
text-align: center;
}
.box--high {
height: 250px;
line-height: 250px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="col-md-8">
<div class="box box--high">4</div>
</div>
</div>
</div>
这篇关于引导程序行之间的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
