Căn chỉnh hai div theo chiều ngang ở giữa cạnh nhau cho trang bằng bootstrap css

Vui lòng tham khảo mã bên dưới những gì tôi đã thử

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

đầu ra:

First Div
SecondDiv

Sản lượng mong đợi:

                      First Div        Second Div

tôi muốn căn chỉnh hai div theo chiều ngang giữa trang bằng cách sử dụng bootstrap css. tôi có thể làm cái này như thế nào ? tôi không muốn sử dụng khái niệm css và nổi đơn giản để làm điều này. bởi vì tôi cần sử dụng bootstrap css để làm việc trong tất cả các loại bố cục (tức là tất cả kích thước và độ phân giải cửa sổ) thay vì sử dụng truy vấn phương tiện.

Cái này cần phải dùng mẹo:

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

Hãy đọc phần hệ thống lưới của tài liệu Bootstrap để tự làm quen với cách hoạt động của lưới Bootstrap:

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

Sử dụng các lớp bootstrap col-xx-#vàcol-xx-offset-#

Vì vậy, những gì đang xảy ra ở đây là màn hình của bạn được chia thành 12 cột. In col-xx-#, #là số cột bạn che và bù đắp là số cột bạn để lại.

Đối với xx, trong một trang web chung, mdđược ưu tiên và nếu bạn muốn bố cục của mình trông giống như trên thiết bị di động, xsđược ưu tiên hơn.

Với những gì tôi có thể đáp ứng yêu cầu của bạn,

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

Nên làm thủ thuật.

Giải pháp Bootstrap 4 thay thế (theo cách này bạn có thể sử dụng các div nhỏ hơn col-6 ):

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

Hơn

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

Đây là một mẹo nhỏ.

Để căn chỉnh hai div theo chiều ngang, bạn chỉ cần kết hợp hai lớp Bootstrap: Đây là cách thực hiện:

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

Câu trả lời được cung cấp bởi Ranveer (câu trả lời thứ hai ở trên) hoàn toàn KHÔNG hoạt động.

Anh ấy nói hãy sử dụng col-xx-offset-#, nhưng đó không phải là cách sử dụng hiệu số.

Nếu bạn đã lãng phí thời gian của mình để cố gắng sử dụng col-xx-offset-#, như tôi đã làm dựa trên câu trả lời của anh ấy, giải pháp là sử dụng offset-xx-#.

Thay thế mà tôi đã lập trình Angular:

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

Tôi khuyên bạn nên dùng lưới css trên bootstrap nếu điều bạn thực sự muốn là có nhiều dữ liệu có cấu trúc hơn, ví dụ: bảng cạnh nhau với nhiều hàng, bởi vì bạn không phải thêm tên lớp cho mọi con:

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

lưới css