ブートストラップレスポンスレイアウト - 2×100％幅のコンテナ

Question

私はmy personal webpageと反応しませんでした。これは適切に表示されるように形作られました@1920x1080 screen。今、私はそれが反応するようにしたいので、私はブートストラップで私の冒険を始めました。私は列の合計が12でなければならないことを知っていますが、私のウェブページは2つのdivに内容があります。各幅はそれぞれです（私のウェブサイトにアクセスし、私が話していることを見るには右にスクロールしてください）。

私の質問は - そのレイアウトを私のレスポンシブプロジェクトに移植する方法ですか？ 1つの行に2つのcontainer-fluid divを配置する方法はありますか？

Answer 1

ラッパーを追加し、それを200vw幅とdisplay: flex

html, body { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    width: 200vw; 
 
    display: flex; 
 
} 
 
.container-fluid { 
 
    flex: 1; 
 
    background: lightgray 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     First 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     Second 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

またはdisplay: inline-block

html, body { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    white-space: nowrap; 
 
} 
 
.container-fluid { 
 
    display: inline-block; 
 
    width: 100%; 
 
    background: lightgray; 
 
    white-space: normal; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     First 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     Second 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を与えます

Answer 2

行はコンテナ流体でなければならず、反対でもありません。 2つのdivに幅の広い100％を作成するには次のことができます。

<section class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      First div 100% width for all device 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      Second div 100% width for all device 
     </div> 
    </div> 
</section>