BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】モバイルレイアウトでBootstrap 3の列の順序を変更するにはどうすればいいですか？

2022-03-27 03:19:11

質問

レスポンシブレイアウトで、上部に固定ナビバーがあるものを作っています。 その下にサイドバー(3)とコンテンツ(9)の2カラムがあります。 デスクトップでは次のように表示されます。

<ブロッククオート

ナブバー

[3][9]

私が resize をモバイル化する。 navbar は圧縮されて非表示になり、このようにコンテンツの上にサイドバーが積み重なります。

<ブロッククオート

ナブバー

[3]

[9]

メインコンテンツを一番上に表示させたいので、モバイルでの並び順をこれに変更する必要があります。

<ブロッククオート

ナブバー

[9]

[3]

見つけた この記事 しかし、その回答は、現在のBootstrapのバージョンには適用されないと編集されています。

モバイルでこれらの列を並べ替えるにはどうしたらよいですか？ あるいは、サイドバーのリストグループを拡張ナビバーに入れるにはどうすればよいですか?

以下は私のコードです。 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

解決方法は？

小さい画面では列の並び順を変更できませんが、大きい画面では変更することができます。

だから、カラムの順番を変えてください。 

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

デフォルトでは、メインコンテンツが最初に表示されます。

そのため、携帯電話ではメインコンテンツが最初に表示されます。

を使用することで col-lg-push と col-lg-pull を使えば、大画面でカラムを並び替え、左側にサイドバー、右側にメインコンテンツを表示することができます。

作業内容 ここで操作する .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します