css - Center align five columns in a single row without offset - bootstrap -
i have 5 col-md-2 div within row div.
to center align have used col-md-offset-1 first col-md-2 div.
i made column divs sortable(jqueryui)
http://jqueryui.com/sortable/#display-grid
so when move first col-md-2 div, offset moves it.
http://jsfiddle.net/1uuuru2m/4/
<html> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script> $(function() { $("#sortable").sortable(); $("#sortable").disableselection(); }); </script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="row content-boxes" id="sortable"> <div class="col-md-2 col-md-offset-1 ui-state-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">a</h3> </div> <div class="list-group"> <li class="list-group-item">first kid of a</li> <li class="list-group-item">second kid of a</li> <li class="list-group-item">third kid of a</li> </div> </div> </div> <div class="col-md-2 ui-state-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">b</h3> </div> <div class="list-group"> <li class="list-group-item">first kid of b</li> <li class="list-group-item">second kid of b</li> <li class="list-group-item">third kid of b</li> </div> </div> </div> <div class="col-md-2 ui-state-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">c</h3> </div> <div class="list-group"> <li class="list-group-item">first kid of c</li> <li class="list-group-item">second kid of c</li> <li class="list-group-item">third kid of c</li> </div> </div> </div> <div class="col-md-2 ui-state-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">d</h3> </div> <div class="list-group"> <li class="list-group-item">first kid of d</li> <li class="list-group-item">second kid of d</li> <li class="list-group-item">third kid of d</li> </div> </div> </div> <div class="col-md-2 ui-state-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">e</h3> </div> <div class="list-group"> <li class="list-group-item">first kid of e</li> <li class="list-group-item">second kid of e</li> <li class="list-group-item">third kid of e</li> </div> </div> </div> </div> </body> </html> how can maintain center-alignment within row div without using offset on first col div?
use empty col-md-1 instead of offset doesn't move around. jsfiddle.
<div class="row content-boxes" id="sortable"> <div class="col-md-2 col-md-offset-1 ui-state-default"> goes to
<div class="row content-boxes" id="sortable"> <div class="col-md-1"></div> <div class="col-md-2 ui-state-default"> css twitter-bootstrap-3
No comments:
Post a Comment