한 행에 세 개의 열, 텍스트 (제목)가있는 처음 두 개, 레이블 / 선택 입력이있는 마지막 열이 하나씩 쌓여 있습니다. 내가하고 싶은 것은 열을 다른 너비로 줄 바꿈하는 것입니다. 특히 레이블 / 선택은 md, 텍스트 전용은 sm. 간단 해 보이지만 레이블과 선택 랩을 동시에 만들 수는 없습니다. 선택은 md예상대로 중단 되지만 레이블 sm은 제목과 함께 너비 로만 줄 바꿈됩니다 .
<div class="row">
<div class="col-sm-4">
<h2>Large title</h2>
</div>
<div class="col-sm-5">
<h3>Smaller, longer title</h3>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sel">Select an option</label>
<select id="sel" name="sel" class="form-control">
<option>First option with long text</option>
<option>Second option with long text</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/uft4vaoc/
내가 여기서 멍청한 짓을하고 있니?
나는 이것이 당신이 원하는 것이라고 생각합니다, 바이올린 https://jsfiddle.net/uft4vaoc/1/ 참조
다음 col-xs-12과 같이 함께 래핑하려는 div에 추가 하십시오.
<div class="col-md-3 col-xs-12">
더 좋은 흐름을 제공하기 위해이 예제와 같은 추가 클래스를 추가 할 수 있습니다. https://jsfiddle.net/uft4vaoc/3/
<div class="col-md-3 col-xs-12">
<div class="row">
<div class="form-group col-md-12 col-sm-6 col-xs-8">
<label for="sel">Select an option</label>
<select id="sel" name="sel" class="form-control">
<option>First option with long text</option>
<option>Second option with long text</option>
</select>
</div>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다