在移動設備上的自舉拉 - 右拉左 - 中心

我有問題製作頁腳拉左和拉右然後集中在移動設備上。目前在桌面上顯示正常。在移動設備上的自舉拉 - 右拉左 - 中心

碼（fiddle）：

<footer > 
<div class="container"> 
    <p> 
     <div class="col-sm-4 pull-left"> 
      <strong>Powered by Google</strong>. 
     </div> 
     <div class="col-sm-4 pull-right"> 
      <a href="" title="Terms" target="_blank">Terms</a> 
      <span class="">|</span> 
      <a href="" title="Policy" target="_blank">Policy</a> 
     </div> 
    </p> 
    <BR> 
    <p> 
     <div class="col-sm-4 pull-left"> 
      Please direct all queries to [email protected] 
     </div> 
     <div class="col-sm-4 pull-right"> 
      2.1 
     </div> 
    </p> 

</div>

正如你可以看到，當它打開的時候它顯示該移動設備：

我希望能夠顯示它類似於以移動設備爲中心的移動設備：

來源

2016-05-12 Bazinga

你正在展示作爲期望的輸出是完全不同的內容是什麼？ –

你需要使用@media查詢來控制這些東西：https://jsfiddle.net/1gLmb0yy/5/ – twxia

並且你有一個錯誤的引導程序結構，你需要用'row'來包裝'col-xx-xx' – twxia

將您的col-*** div封裝在.row div中。
我認爲你不需要pull-left和pull-right類。添加col-sm-push-4類做出正確的div移動到頁面的右邊框
添加自定義CSS的移動設備上的中心內容，就像這樣：

@media (max-width: 767px) { .col-sm-4 { text-align: center; } }

或者添加自定義類，這些div，如果您不希望其他.col-sm-4 div具有居中內容。

https://jsfiddle.net/1gLmb0yy/6/

來源

2016-05-12 09:48:56 Julia

您需要使用查詢媒體要做到這一點，因爲當其結果是拉到右側的小分辨率。它會響應並進入底部。您可以使用F12開發人員工具來查看。

<footer > 
     <div class="container"> 
       <div class="col-sm-4 row"> 
        <strong>Powered by Google</strong>. 
        Please direct all queries to [email protected] 
       </div> 
       <div class="col-sm-4 row pull-right"> 
        <a href="" title="Terms" target="_blank">Terms</a> 
        <span class="">|</span> 
        <a href="" title="Policy" target="_blank">Policy</a> 
        2.1 
       <div/> 
      </div> 
      </div> 
    <footer>

開發人員工具結果。

示例媒體查詢

@media (max-width: 767px) { 

     .col-sm-6.row.pull-right { 
    position: relative; 
    top: -15px; 
    } 
}

來源

2016-05-13 08:07:07 Mike

在移動設備上的自舉拉 - 右拉左 - 中心

回答

相關問題