부트 스트랩 CSS를 사용하여 두 개의 div를 가로로 나란히 중앙 페이지에 정렬

내가 시도한 코드 아래를 참조하십시오

<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를 사용하여 두 개의 div를 수평으로 중앙에 정렬하고 싶습니다. 어떻게 할 수 있습니까? 나는 이것을하기 위해 간단한 CSS와 부동 개념을 사용하고 싶지 않습니다. 미디어 쿼리를 사용하는 대신 모든 종류의 레이아웃 (즉, 모든 창 크기 및 해상도)에서 작동하려면 부트 스트랩 CSS를 사용해야하기 때문입니다.

이것은 트릭을 수행해야합니다.

<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

부트 스트랩 클래스를 사용 col-xx-#하고col-xx-offset-#

그래서 여기에서 일어나는 것은 화면이 12 개의 열로 나뉘는 것입니다. 에서 col-xx-#, #당신은 커버하고 오프셋 열 수는 떠나 컬럼의 수입니다.

의 경우 xx일반 웹 사이트에서는 md선호되며 레이아웃이 모바일 장치에서 동일하게 보이도록하려면 xs선호됩니다.

내가 당신의 요구 사항을 만들 수있는 것으로,

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

트릭을해야합니다.

대체 부트 스트랩 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>

더

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

이것은 트릭입니다.

두 div를 수평으로 정렬하려면 두 클래스의 부트 스트랩을 결합하면됩니다. 방법은 다음과 같습니다.

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

Ranveer가 제공 한 응답 (위의 두 번째 답변)은 절대 작동하지 않습니다.

그는를 사용하라고 말 col-xx-offset-#했지만 오프셋이 사용되는 방식은 아닙니다.

col-xx-offset-#그의 답변을 바탕으로했던 것처럼 사용하려고 시간을 낭비했다면 해결책은 offset-xx-#.

내가 Angular를 프로그래밍 한 대안 :

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

모든 자식에 대해 클래스 이름을 추가 할 필요가 없기 때문에 실제로 원하는 것이 더 많은 구조화 된 데이터를 갖는 것이라면 부트 스트랩보다 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 그리드