2015-10-06 86 views
0

我想在小设备上显示列表上方的列表,并且还需要额外的小设备。我使用push-*和pull- *类,它们在bootstrap中可用,但不起作用。请建议。提前致谢。推拉效应在引导程序中不起作用3

<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>

+0

什么是预期的行为? – niyasc

+0

您是否尝试过col-xs-push-6? – guvenckardas

+0

是的,我用col-sm-push-6和col-xs-push-6。但它不起作用。 – seven

回答

1

如果您想对小型设备,并在您需要更改的DOM元素的顺序介质设备的权限在上面的列表中。然后你可以使用pushpull做,你想

单击“全页面”按钮来查看...

<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>

+0

你能分享这个代码吗? – seven

+0

???代码在我的答案中 - 注意元素的顺序。列表第一个 – Turnip

+0

工作很好,非常感谢。 – seven

相关问题