ブートストラップcssを使用して、2つのdivをページの中央に水平に並べて配置します


90

私が試したことを以下のコードで参照してください

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

出力:

First Div
SecondDiv

期待される出力:

                      First Div        Second Div

ブートストラップcssを使用して、2つのdivを水平方向に中央からページに揃えたい。これどうやってするの ?私はこれを行うために単純なCSSとフローティングコンセプトを使用したくありません。メディアクエリを使用する代わりに、ブートストラップcssを使用してすべての種類のレイアウト(つまり、すべてのウィンドウサイズと解像度)で動作する必要があるためです。

回答:


196

これでうまくいくはずです:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

Bootstrapドキュメントのグリッドシステムセクションを読んで、Bootstrapのグリッドがどのように機能するかを理解してください。

http://getbootstrap.com/css/#grid


1
ありがとう。col-xs-6とは何ですか?id div countの増加は、これを変更する方法を意味します
SivaRajini 2014

2
col-xs-6は、使用可能な12列グリッドの半分を割り当てます。私の回答でリンクしたブートストラップのドキュメントを読んだら、あなたの側で試行錯誤した後、すべて意味があるはずです:-)
Billy Moat

1
なぜxsありませんかmd
アレクサンダー2015年

5
@ Alexander-xsを使用すると、モバイルからデスクトップまでのすべての画面サイズで2つのdivが並んで表示されます。
ビリーモート2015年

1
さて、xsはすべてのソリューションに対応し、たとえばlgはより高度なソリューションにのみ対応しますか?
アレクサンダー2015年

29

ブートストラップクラスcol-xx-#を使用してcol-xx-offset-#

つまり、ここで起こっているのは、画面が12列に分割されているということです。でcol-xx-##はカバーする列の数であり、offsetは残す列の数です。

の場合xx、一般的なWebサイトでmdはが推奨され、モバイルデバイスでレイアウトを同じように見せたい場合xsはが推奨されます。

私があなたの要求をどうすることができるかで、

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

トリックを行う必要があります。


7

代替のブートストラップ4ソリューション(この方法では、col-6よりも小さいdivを使用できます):

水平方向の中央揃え

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

もっと


4
<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

これでうまくいきます。


2

2つのdivを水平方向に整列するには、Bootstrapの2つのクラスを組み合わせる必要があります。方法は次のとおりです。

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

0

Ranveerによって提供された応答(上記の2番目の回答)は絶対に機能しません。

彼はを使用すると言いますcol-xx-offset-#が、それはオフセットが使用される方法ではありません。

col-xx-offset-#私が彼の答えに基づいて行ったように、使用しようとして時間を無駄にした場合、解決策はを使用することoffset-xx-#です。


0

私がAngularのプログラミングを行った代替案:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

0

すべての子にクラス名を追加する必要がないため、本当に必要な場合は、ブートストラップよりもcssグリッドをお勧めします。

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css-grid


0
Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.