드롭 다운 메뉴에서 인라인으로 표시

Question

나는 쉬운 일을해야한다는 것과 너무 많은 문제가 있습니다.

제목을 원합니다. 상태은 내 드롭 다운과 동일한 행으로 표시되지만 항상 다음 행에 있습니다. 레일 4 부트 스트랩 보석 또한

<div class="status-area"> 

    <%= form_for project, {:class => "form-inline"} do |f| %> 
    <div class="form-group"> 
     <h4>Status</h4> 
     <%= f.select(:status, options_for_select(Status::STATUSES.collect { |s| [s.capitalize, s] }, project.status.to_s.downcase), {}, {:class => "form-control input-sm"}) %> 
    </div> 
    <%= f.submit 'Update Project Status', class: 'btn btn-default btn-sm', style: 'padding: 2px 10px;' %> 
    <% end %> 
</div> 

드롭 다운이 부문의 전체 폭이

Answer 1

첫번째 도움이 될 이유 파악에 도움을 사용하여 임, 당신은 라벨 태그에 H4 변경해야합니다 (기본적으로 인라인)

<form class="form-inline"> 
    <div class="form-group"> 
     <label>Status</label> 
     <select class="form-control input-sm"></select> 
    </div> 
    <input class='btn btn-default btn-sm' style='padding: 2px 10px;'/> 
</form> 

http://jsfiddle.net/bsgNQ/ - 결과 창 너비를 늘립니다.

두 번째로, 부트 스트랩 자습서에서 인라인 양식은 적어도 768px 너비의 뷰포트 내의 양식에만 적용됩니다. 따라서 화면이 좁은 경우 인라인 형식을 사용하여 다시 생각해 보는 것이 좋습니다.