11

ブートストラップ 2 の前は、フロートを逆にすることで、グリッドの積み重ね順序を逆にすることができました。

ブートストラップ 3 では、これは機能しないようです。ブートストラップ 3 の解決策を教えてもらえますか?

任意の支援をいただければ幸いです。

4

2 に答える 2

16

.col-md-push-*および.col-md-pull-*修飾子クラスを使用し ます。参照: http://getbootstrap.com/css/#grid-column-ordering

例:

<div class="container"> 
<div class="col-sm-5 col-sm-push-7" style="height:50px;background-color:green;">first right</div>
<div class="col-sm-7 col-sm-pull-5" style="height:100px;background-color:red;">second left</div>
</div>
于 2013-08-31T11:07:09.683 に答える
3

Bootstrap 3 では、 col-md-push-を使用できます。およびcol-md-pull-。
ここに完全なコードがあります。
これで問題が解決することを願っています。

<html><head>
	<title>Bootstrap in practice: the grid system</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap CSS -->
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

	<!-- To better visualize the columns -->
	<style>
	.row > div {
		background-color: #dedef8;
		box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
	}
	</style>

</head>
<body>
<div class="container">

	<h1>Hello, world!</h1>

	<div class="row">
		<div class="col-md-4 col-md-push-8">I was left</div>
		<div class="col-md-8 col-md-pull-4">I was right</div>
	</div>
</div>

</body></html>

このコードを別の HTML ページで実行する

ここにスナップショットがあります ここに画像の説明を入力

于 2015-03-18T23:35:56.533 に答える