Bootstrap 3에서 기둥을 쌓을 때 수직 공간

Bootstrap 3에서 기둥을 쌓을 때 수직 공간

---

모바일 모드에서 열을 쌓을 때 열 내용을 구분하는 세로 공간이 필요합니다. 어떻게해야합니까?

http://jsfiddle.net/tofutim/3sWEN/의 jsfiddle을 참조 하고 출력 너비를 변경하십시오. 두 번째 lorem ipsum 앞에 약간의 간격이 있어야합니다.

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

---

한 가지 방법은 col-*더 작은 장치 / 폭에서 여백 하단을 추가하는 CSS를 사용하는 것입니다 .

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

또 다른 방법은 div더 작은 장치 / 너비에서만 볼 수 있는을 추가하는 것입니다.

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

데모 : http://bootply.com/92276

---

2019 업데이트

이제 부트 스트랩 4 에는 사용할 수있는 간격 유틸리티 가 있습니다.

참조 : Bootstrap 4에서 세로로 쌓인 열 사이에 간격 추가

---

사용 .form-group컬럼에

That is the bootstrap way. Other mentioned CSS hacks may work, but aren't the intended way to achieve what you want. Hacking up bootstraps CSS may lead to more work later when changing your bootstrap version.

Bootply example: http://www.bootply.com/4cXfQkTCAm#

---

I wanted to have it working for when my columns stack at less than 991px and effect all but the first child so I put

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}

---

A plain Bootstrap4, no extra CSS, hacks or mixin solution would be something like:

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

This adds a margin-bottom (mb-3) but sets it to zero when not stacked (mb-md-0).

Since media queries for spacing utils like "mb-3" apply to "everything over" (min-width) you need to do the oppsite and reset it to 0 (mb-XX-0) when not stacked. In this case we set it to stack under "md" (sm) so we set margin 0 at that breakpoint.

Here´s a fork of your jsfiddle udated to include margin only on mobile. The "mb-3 mb-md-0" styles on columns show the proposed solution. (Jsfiddle version here: http://jsfiddle.net/cb9oc064/10/)

@import url('https://getbootstrap.com/dist/css/bootstrap.css');

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

---

Look at this example http://getbootstrap.com/examples/carousel/ When stacked There is a margin between the text and the 500*500 Image. This is because The text has <p> around it and its add margin bottom 20px

---

Add a negative top margin to each row, and counter that margin on each column, like this:

.row {
  margin-top: -10px;
}
[class^='col'], [class*=' col'] {
  margin-top: 10px;
}

After columns start stacking they get the vertical margin between them.

Works on all screen sizes.

---

Try using span instead of div with bootstrap classes.

참고URL : https://stackoverflow.com/questions/19822127/vertical-space-when-stacking-columns-in-bootstrap-3