html - 列のブートストラップ列

Question

これは視覚的なデモンストレーションです:画像

ラップトップの列 (col-md-8) を 2 番目の列に入れようとしていますが、試してみると、もう 1 つはラップトップの列の下に入りました。ラップトップの列の中にあり、その列のラップトップはまだフルサイズです。

Answer 1

あなたはこのようにしたいですか？それはあなたが持っている非常に短くて厄介な説明です。だから、私が正しいことを願っています。

<div class="row">
    <div class="col-md-8 col-sm-12">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                Laptop Image
            </div>
        </div>
    </div>
</div>

「col-md-8 col-sm-12」クラスは、タブレットビュー+デスクトップビューで好きなように列のコンテンツを保持しますが、スマートフォンビューのように小さくなると、列が全幅に拡張され、引き続き使用できますノートパソコンの列の中にあるものを見ることができます。

こちらからブートストラップのドキュメントをお読みください。グーグルがあなたの問題を解決するために必要なその他のことはすべて、あなたを助けるためにここにいます。:)

アップデート

これはあなたが欲しいものですよね？ https://jsfiddle.net/5jrt314r/2/

そのクラスの内部にあるものは.inside、ラップトップの画像サイズによって異なります。.laptopあなたが持っているクラスに基づいて、自動的に水平方向と垂直方向の中央に配置されます。

Answer 2

レスポンシブが必要だと言ったので、次のことを行う必要があります。

• ラップトップ要素の縦横比を画像と同じに保ちます。
• 親要素を埋めるためにラップトップの画像サイズが変更された場合でも、常にラップトップの画面を埋める画面要素を用意します。

私が正しければ、あなたはこれを望んでいます：

HTML:

<div class="row">
    <div class="col-xs-8  laptop">
        <div class="row">
            <div class="col-xs-offset-3 col-xs-9 screen">
                This column need to go in laptop screen
            </div>
        </div>
    </div>
</div>

CSS:

.laptop {
  background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
  background-size: 100%;
  background-repeat: no-repeat;
 /* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
  padding-bottom: 89.32%;
}

.screen {
  background: red;
  /* Make sure this element is always the size of the screen */
  padding-bottom: 64%;
}

画像の縦横比は、89.32~%幅を高さで割ってそれぞれ2084pxとであると計算しました2333px。

ここにコードペンの例があります http://codepen.io/anon/pen/aNqKZL

アップデート

最初の例では、.screen要素がコンテンツによって引き伸ばされるため、ラップトップの画面を超えてしまいます。ここにそれを扱うバージョンがあります http://codepen.io/anon/pen/qZxKRo