Question

我在行div中有五个col-md-2 div。

要居中对齐我已将col-md-offset-1与第一个col-md-2 div一起使用。

我将列divs Sortable（jqueryui）

http://jqueryui.com/sortable/#display-grid

所以现在当我移动第一个col-md-2 div时，偏移随之移动。

<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 child of a</li>
             <li class="list-group-item">second child of a</li>
             <li class="list-group-item">third child 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 child of b</li>
             <li class="list-group-item">second child of b</li>
             <li class="list-group-item">third child 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 child of c</li>
             <li class="list-group-item">second child of c</li>
             <li class="list-group-item">third child 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 child of d</li>
             <li class="list-group-item">second child of d</li>
             <li class="list-group-item">third child 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 child of e</li>
             <li class="list-group-item">second child of e</li>
             <li class="list-group-item">third child of e</li>
          </div>
        </div>
    </div>
</div>
</body>
</html>

如何在不使用第一个col div上的偏移量的情况下保持行div内的中心对齐？

Answer 1

使用空的col-md-1而不是偏移，以便它不会移动。 JSFiddle

<div class="row content-boxes" id="sortable">
    <div class="col-md-2 col-md-offset-1 ui-state-default">

转到

<div class="row content-boxes" id="sortable">
    <div class="col-md-1"></div>
    <div class="col-md-2 ui-state-default">

中心在一行中对齐五列而不使用偏移 - 引导程序

1 个答案: