gpt4 book ai didi

javascript - 如何增加垂直高度并在 Bootstrap 中的 div 滚动中的内容之间添加空间

转载 作者:太空宇宙 更新时间:2023-11-03 23:12:36 27 4
gpt4 key购买 nike

我试图在每个 div 之间添加空间,并且圆圈应该以完整大小显示。

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:

.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;
}

这是我演示的 JS Fiddle:http://jsfiddle.net/arunslb123/g87Lkpxo/

我要实现的目标如下:

Output image

有水平滚动插件吗?

最佳答案

当我将 display 属性更改为 inline-block 并为其指定 margin-left 时,它会给我空格。

http://jsfiddle.net/g87Lkpxo/1/

关于javascript - 如何增加垂直高度并在 Bootstrap 中的 div 滚动中的内容之间添加空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32044088/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com