javascript - How to increase the vertical height and add space between contents in div scroll in bootstrap -
i trying add space between each div , circle should show in full size.
html :
<body> <h1 class="page-header">horizontal scroll 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 bootstrap's javascript plugins) --> <script src="js/jquery.js"></script> <!-- include compiled plugins (below), or include individual files 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; // add line , modify color padding-right: 5px; padding-left: 5px; }
here js fiddle of demo : http://jsfiddle.net/arunslb123/g87lkpxo/
what i'm trying achieve below :
is there horizontal scroll plugin this?
when change display
property inline-block
, give margin-left
gives me spaces.
Comments
Post a Comment