부트 스트랩 CSS 문제

Question

부트 스트랩 CSS를 사용하는 방법에 약간 혼란 스럽습니다. 두 개의 텍스트 상자, 검색 버튼 및 이미지면이 있습니다. 전체 화면의 경우 모든 요소가 한 행에 있어야합니다.

화면 크기를 조정할 때 모든 요소는 차례대로 있어야합니다. 도와주세요

<div class="form-group" style="vertical-align: top; margin-right: 20px"> 
 
     <label for="name" style="color: #eea236"> 
 
      name:</label> 
 
     <input type="text" class="form-control" placeholder="name" name="name" /> 
 
    </div> 
 
    <div class="form-group" style="vertical-align: top; margin-right: 20px"> 
 
     <label for="organization" style="color: #eea236"> 
 
      City:</label> 
 
     <input type="text" class="form-control" placeholder="organization" name="organization" /> 
 
    </div> 
 
    
 
    <button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px"> 
 
     Search</button> 
 
    
 
    
 
    <img src="xx.jpg" />

....

당신은 화면에 추가 할 수

Answer 1

: 인라인 블록을 모두 그 폼 그룹 사업부의이

<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;"> 
 
     <label for="name" style="color: #eea236"> 
 
      name:</label> 
 
     <input type="text" class="form-control" placeholder="name" name="name" /> 
 
    </div> 
 
    <div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;"> 
 
     <label for="organization" style="color: #eea236"> 
 
      City:</label> 
 
     <input type="text" class="form-control" placeholder="organization" name="organization" /> 
 
    </div> 
 
    
 
    <button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px"> 
 
     Search</button> 
 
    
 
    
 
    <img src="xx.jpg" />

Answer 2

이미지 반응 형 수업 :

당신은 추가 시도 할 수 있습니다 :

<img class="img-responsive" src="xx.jpg" /> 

Answer 3

봅니다 코드 display: inline 즉,이 당신의 외형을 바꾸려면이 추가.

<div class="form-group" style="vertical-align: top; margin-right: 20px; display: inline"> 

Answer 4

속성은 display: inline-block; 속성을 사용해야합니다.

<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;"> 
    <label for="name" style="color: #eea236"> 
     name:</label> 
    <input type="text" class="form-control" placeholder="name" name="name" /> 
</div> 
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;"> 
    <label for="organization" style="color: #eea236"> 
     City:</label> 
    <input type="text" class="form-control" placeholder="organization" name="organization" /> 
</div> 

<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px"> 
    Search</button> 


<img src="xx.jpg" /> 

Answer 5

인라인 CSS를 추가하지 않아도됩니다. 부트 스트랩에는 텍스트 상자, 단추 등을 한 줄에 나란히 배치하는 기본 기능이 있습니다.

양식을 <form> 태그로 묶어야합니다.

<form class="form-inline" role="form"> 
    *Your form groups here.* 
</form> 

브라우저의 너비에 따라 양식 그룹이 인라인으로 표시되어야합니다. 그것은 또한 반응 적이어야합니다.

Answer 6

<form class="form-inline"> 
    <div class="form-group"> 
     <label for="name">Name:</</label> 
     <input type="text" class="form-control" id="name" placeholder="Name"> 
    </div> 
    <div class="form-group"> 
     <label for="city">City:</</</label> 
     <input type="text" class="form-control" id="city" placeholder="City"> 
    </div> 
    <button type="submit" class="btn btn-warning">Search</button> 
    <img class="img-responsive" src="xx.jpg" /> 
</form> 

Answer 7

<div class="form-group"> 
     <label class="col-xs-2 control-label" style="color:eea236">name:/label> 
<div class="col-xs-3"> 
     <input type="text" class="form-control" placeholder="name" name="name"/> 
    </div> 
<label for="organization" style="color: #eea236">City:</label> 
<div class="col-xs-3"> 
<input type="text" class="form-control" placeholder="organization" name="organization" /> 
</div> 
<div class="col-xs-3"> 
<button class="btn btn-warning" type="submit">Search</button> 
</div> <img src="xx.jpg" /> 
    </div>