Question

我想在小型设备和超小型设备中显示段落上方的列表。我使用push-*和pull- *类，它们在bootstrap中可用，但它不起作用。请建议。提前谢谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-push-6 col-xs-12 col-xs-push-12"> 
 <p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p> 
</div>  
<div class="col-md-8 col-sm-6 col-sm-pull-6 col-xs-12 col-xs-pull-12"> 
    <ul class="list-unstyled">
    <li>sse viverra eleifend tortor tellus suscipit</li>
    <li>cras posuere pede placerat, velit</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>sse viverra eleifend tortor tellus suscipit</li>
    <li>cras posuere pede placerat, velit</li>
    </ul>
</div>


</div>
</div>

Answer 1

如果您希望列表位于小型设备上，而右侧位于中型设备上，则需要更改DOM中元素的顺序。然后，您可以根据需要使用push和pull

点击“整页”按钮查看...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
         <div class="col-md-8 col-md-push-6">
            <ul>
                <li>sse viverra eleifend tortor tellus suscipit</li>
                <li>cras posuere pede placerat, velit</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>sse viverra eleifend tortor tellus suscipit</li>
                <li>cras posuere pede placerat, velit</li>
            </ul>
        </div>
        <div class="col-md-4 col-md-pull-6">
            <p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
        </div>
       
    </div>
</div>

push and pull效果在bootstrap 3中不起作用

1 个答案: