Question

我尝试使用标签来判断什么东西是InProcess但是标签在面板中移动另一个跨度，即使它有足够的空间移动。

这是代码。

                    <div class="panel-body log-work-lot-container">
                        <ul class="list-unstyled">
                            <li class="log-work-item-lot" data-ng-click="vm.SetActiveBatch(batch);" data-ng-class="{'selected' : batch.IsActive}" 
                                data-ng-repeat="batch in vm.Batches" data-ng-show="!batch.IsScrapped && !batch.IsCompleted">
                                <div style="text-align:center;">
                                    <span class="pull-left">0000{{batch.Name}}</span>
                                    <span class="pull-right label label-info" data-ng-show="batch.InProcess"> In Process </span>
                                    <span style="">QTY {{batch.Quantity}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>

Answer 1

这应该这样做：

.list-unstyled .pull-left { margin-right: -100%; }
.list-unstyled .pull-right { margin-left: -100%; }

请注意，这是一种黑客行为方式，如果它们不适合一行，则会使您的左/右元素与居中内容重叠。为了在非常小的屏幕上不重叠，我根据您的标记更新了your fiddle。它并不完美，但它比重叠它们更好:)。

Answer 2

使用引导网格结构以列格式组织数据。一个例子 - http://www.bootply.com/5FLFCdIny1

（以上示例仅使用col-xs- *，它将以列格式显示所有类型设备的数据。您可以根据屏幕大小自定义显示）

Bootstrap标签移动其他跨度

2 个答案: