2015-10-06 89 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

相關問題