내가 시도한 코드 아래를 참조하십시오
<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의 그리드가 작동하는 방식을 익히십시오.
답변
부트 스트랩 클래스를 사용 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>