Sejajarkan dua div secara horizontal berdampingan di tengah halaman menggunakan bootstrap css

90

Silakan lihat kode di bawah ini apa yang saya coba

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

keluaran:

First Div
SecondDiv

Output yang diharapkan:

                      First Div        Second Div

saya ingin menyelaraskan dua div secara horizontal ke tengah halaman menggunakan bootstrap css. bagaimana saya bisa melakukan ini? saya tidak ingin menggunakan css sederhana dan konsep mengambang untuk melakukan ini. karena saya perlu menggunakan bootstrap css untuk bekerja di semua jenis tata letak (yaitu, semua ukuran jendela dan resolusi) daripada menggunakan kueri media.

html css twitter-bootstrap SivaRajini
sumber

Jawaban:

193

Ini harus melakukan trik:

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

Bacalah bagian sistem kisi dari dokumen Bootstrap untuk membiasakan diri Anda dengan cara kerja kisi Bootstrap:

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

Billy Moat
sumber
1
Terima kasih. dapatkah saya mengetahui apa itu col-xs-6? id div count meningkat berarti bagaimana memodifikasi ini
SivaRajini
2
col-xs-6 mengalokasikan setengah dari kisi 12 kolom yang tersedia. Jika Anda membaca dokumen Bootstrap yang saya tautkan dalam jawaban saya, semuanya harus masuk akal setelah beberapa percobaan dan kesalahan di pihak Anda :-)
Billy Moat
1
Kenapa xstidak md?
Alexander
5
@Alexander - menggunakan xs berarti kedua div akan berdampingan di semua ukuran layar dari seluler hingga desktop.
Billy Moat
1
Oke, jadi xs untuk semua solusi dan misalnya lg hanya untuk solusi yang lebih tinggi?
Alexander
29

Gunakan kelas bootstrap col-xx-#dancol-xx-offset-#

Jadi yang terjadi di sini adalah layar Anda terbagi menjadi 12 kolom. Di col-xx-#, #adalah jumlah kolom yang Anda tutupi dan offset adalah jumlah kolom yang Anda tinggalkan.

Karena xx, di situs web umum, mdlebih disukai dan jika Anda ingin tata letak Anda terlihat sama di perangkat seluler, xslebih disukai.

Dengan apa yang bisa saya buat dari kebutuhan Anda,

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

Harus melakukan trik.

Ranveer
sumber
7

Solusi Bootstrap 4 alternatif (dengan cara ini Anda dapat menggunakan div yang lebih kecil dari col-6 ):

Pusat Align Horizontal

<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>

Lebih

ErTR
sumber
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>

Ini triknya.

Oluwasayo Babalola
sumber
2

Untuk menyelaraskan dua div secara horizontal, Anda hanya perlu menggabungkan dua kelas Bootstrap: Begini caranya:

<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>
Dev Rathi
sumber
0

Tanggapan yang diberikan oleh Ranveer (jawaban kedua di atas) sama sekali TIDAK berfungsi.

Dia mengatakan untuk menggunakan col-xx-offset-#, tapi itu bukan cara penggunaan offset.

Jika Anda menyia-nyiakan waktu Anda mencoba menggunakan col-xx-offset-#, seperti yang saya lakukan berdasarkan jawabannya, solusinya adalah menggunakan offset-xx-#.

Michael Novello
sumber
0

Alternatif yang saya lakukan pemrograman Angular: 

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

Saya merekomendasikan css grid over bootstrap jika yang Anda inginkan, adalah memiliki data yang lebih terstruktur, misalnya tabel berdampingan dengan banyak baris, karena Anda tidak perlu menambahkan nama kelas untuk setiap anak:

// 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

Yuqiu G.
sumber
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>
Shijitha
sumber