ブートストラップグリッド画面サイズ間でジャンプする

ブートストラップを使用してグリッドを作成しようとしていますが、デスクトップ上で画面サイズを変更するとレイアウトが新しい位置にジャンプします。それをdivの中の連続流体と列流体に変えてください。しかし、これは助けになりませんでした。ブートストラップグリッド画面サイズ間でジャンプする

私のCSSとHTMLは

.top-buffer 
 
{ margin-top:10px; 
 
margin-bottom: 10px; 
 
}

<!-- Turn off zooming on Mobile page--> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 

 

 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
<p> This is the nav bar</p> 
 
    </div> 
 
</nav> 
 

 
<div class="jumbotron"> 
 
    <div class="container-fluid"> 
 

 
     <div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. --> 
 
     <div class="row-fluid top-buffer"><!-- open the first row int he grid--> 
 

 
      <div class="col-md-4 col-md-offset-4">    <div class="col-sm-4 col-xs-4" > 
 

 
        <form action="page2JobMainMenu.html"> 
 
        <button type="submit" class="btn btn-default center-block"> Job </button> 
 

 
        </form> 
 

 
       </div> 
 

 
       <div class=" col-sm-4 col-xs-4"> 
 

 
       <form action= "page3CreateQuote.html"> 
 
       <button type="button" class="btn btn-default center-block"> 
 
       Quote </button> 
 
       </form> 
 
       </div> 
 

 
       <div class="col-sm-4 col-xs-4"> 
 

 
       <form action="page4FinanceMainMenu.html"> 
 
       <button type="button" class="btn btn-default center-block"> 
 
       Finance</button> 
 
       </form> 
 
       </div> 
 
     </div><!--close off the cold md 4 div--> 
 
     </div><!-- Close the first row--> 
 

 
      </div><!-- Close the Fluid Container --> 
 
    </div><!--Close the Jumbotron-->

あるすべてのヘルプははるかに高く評価されます。ありがとう

出典

2016-08-11 Chris

ジャンプするとどういう意味ですか？ –

あなたの問題を説明してください。何が起きたくないのかを推測すると、 'col-md-4'が' float：left; width：33.33％ 'to' float：none; width：100％; 'あなたの画面サイズが' 768px'より小さくなったら。 – fyrye

@fyryeはい正しいです。 – Chris

あなたのコードは基本的にそのまま動作します。 col-xs-4を使用すると、最小の解像度でもボタンは3列のレイアウトを保持します。この例ではcol-md-4を使用する必要はなく、.row-fluidはブートストラップ2以降使用されていません。.btn-blockはフルサイズの要素としてブートストラップボタンを処理するように設計されているため、.center-blockも不要です。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    \t <div class="row"> 
 
\t \t <div class="col-xs-4"> 
 
\t \t \t <form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-4"> 
 
\t \t \t <form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-4"> 
 
\t \t \t <form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form> 
 
\t \t </div> 
 
\t </div> 
 
</div>

注：<button><form>内を使用して避けることができる場合は、より多くの機能のためのブートストラップの.btn-groupコンポーネントを利用することができます。

出典

2016-08-11 20:57:22

私は大きな画面でボタンを中央に保つためにmdを使用するつもりでした。しかし、それはジャンプを起こすかもしれない。ロバートに感謝する。 – Chris

'col-md-4'は' col-xs-4'がまだ提供していないことを何もしていませんでした。どちらの列呼び出しも、合計コンテナの1/3を使用して指定します。実際に変更があった場合（col-sm-6 col-md-4）は、 –

ブートストラップグリッド画面サイズ間でジャンプする

答えて

関連する問題