如何在引导程序的div滚动中增加垂直高度并在内容之间添加空间
[英]How to increase the vertical height and add space between contents in div scroll in bootstrap
问题描述
I was trying to add space between each div and the circle should show in full size. 
我试图在每个div之间添加空间，圆圈应该以完整尺寸显示。
HTML : HTML：
<body>
<h1 class="page-header">Horizontal Scroll for questions</h1>
<div class="container-fluid" style="overflow-x:scroll;white-space: nowrap;overflow-y:hidden ;">
<div class="col-sm-3 c">
<h6>2</h6>
</div>
<div class="col-sm-3 c">
<h6>3</h6>
</div>
<div class="col-sm-3 c">
<h6>4</h6>
</div>
<div class="col-sm-3 c">
<h6>5</h6>
</div>
<div class="col-sm-3 c">
<h6>5</h6>
</div>
<div class="col-sm-3 c">
<h6>5</h6>
</div>
<div class="col-sm-3 c">
<h6> 5</h6>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
CSS : CSS：
.col-sm-3{display: inline-block;width:auto;}
.c {
color: #64cbcd;
font-size: 11px;
border-radius: 50%;
height: 30px;
width: 30px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-color: blue;
box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
padding-right: 5px;
padding-left: 5px;
}
Here is the JS Fiddle of my demo : http://jsfiddle.net/arunslb123/g87Lkpxo/ 这是我的演示的JS小提琴： http : //jsfiddle.net/arunslb123/g87Lkpxo/
What I'm trying to achieve is as below : 我想要达到的目标如下：
Is there any horizontal scroll plugin to do this? 有水平滚动插件可以做到这一点吗？
3 个解决方案
解决方案1
1 2015-08-17 06:41:55
When I change the display property to inline-block and give it margin-left it gives me the spaces. 当我将display属性更改为inline-block并将其margin-left ，会给我空格。
http://jsfiddle.net/g87Lkpxo/1/ http://jsfiddle.net/g87Lkpxo/1/
解决方案2
1 2015-08-17 06:47:03
删除display: table-cell ，您可以在margin-left margin-right或margin-right圆之间添加更多空间
解决方案3
1 2015-08-17 07:12:59
I have modified your fiddle to look like this: jsFiddle . 我已将您的小提琴修改为如下形式： jsFiddle 。
Here is what has changed: 这是发生了什么变化：
- Inline styles on
.container-fluidelement were moved to CSS..container-fluid元素上的内联样式已移至CSS。 - Applied these changes to
.container-fluidelement:height: 44px;将这些更改应用于.container-fluid元素：height: 44px;andpadding-top: 4px;和padding-top: 4px;.。 - Applied these changes to
.celement:display: inline-block;将这些更改应用于.c元素：display: inline-block;,margin-left: 10px;， margin-left: 10px;,padding-left: 10px;， padding-left: 10px;andpadding-bottom: 10px;和padding-bottom: 10px;.。 - Added a new rule for
h6elements:h6 { margin-left: -10px; }为h6元素添加了新规则：h6 { margin-left: -10px; }h6 { margin-left: -10px; }.h6 { margin-left: -10px; }。
Snippet: 片段：
.container-fluid { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; height: 44px; padding-top: 4px; } .col-sm-3 { display: inline-block; width:auto; } .c { color: #64cbcd; font-size: 11px; border-radius: 50%; height: 30px; width: 30px; display: inline-block; margin-left: 10px; text-align: center; vertical-align: middle; border-color: blue; box-shadow: 0 0 0 3px #002525; padding-left: 10px; padding-bottom: 10px; } h6 { margin-left: -10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1 class="page-header">Horizontal Scroll for questions</h1> <div class="container-fluid"> <div class="col-sm-3 c"> <h6>2</h6> </div> <div class="col-sm-3 c"> <h6>3</h6> </div> <div class="col-sm-3 c"> <h6>4</h6> </div> <div class="col-sm-3 c"> <h6>5</h6> </div> <div class="col-sm-3 c"> <h6>5</h6> </div> <div class="col-sm-3 c"> <h6>5</h6> </div> <div class="col-sm-3 c"> <h6> 5</h6> </div> </div>
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.