부트 스트랩 4 버튼 위치

-1

을 형성

이봐, 난이 사이트의 결과로 내 사이트부트 스트랩 4 버튼 위치

<form id="filter_view" method="POST"> {% csrf_token %} 
    <div class="form-row"> 
     <div class="form-group col-md-1"> 
     <label for="select_id">option</label> 
     <select id="select_id" class="form-control"> 
      <option selected>Choose...</option> 
      <option>...</option> 
     </select> 
     </div> 
     <div class="form-group col-md-1"> 
     <label for="inputZip">write</label> 
     <input type="text" class="form-control" id="inputZip"> 
     </div> 
     <div class="form-group col-1 align-bottom"> 
     <button type="submit" class="btn btn-secondary align-bottom">submit</button> 
     </div> 
    </div> 
    </form>

내 버튼의 위치에 문제가 : Website view

하지만 난 내 입력의 행에 버튼을 제출합니다 - 상자, 어떤 아이디어?

출처

2017-11-29 BrotCast

당신이 빈 lable을 사용할 수 있습니다 방문 http://jsfiddle.net/x1hphsvb/315/ –

슬프게도을 – BrotCast

작동하지 않음 보기 창 크기를 늘리는 것입니다. –

양식 태그 내에 "form-inline"클래스를 추가하고 마지막 양식 그룹에 텍스트없이 레이블을 추가 할 수 있습니다.

.form-inline .form-control { 
 
margin-left:5px; 
 
margin-right:5px; 
 
} 
 

 
.form-inline .btn { 
 
margin-left:5px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 

 
    <form class="form-inline"> 
 
    <label for="select_id">option</label> 
 
     <select id="select_id" class="form-control"> 
 
      <option selected>Choose...</option> 
 
      <option>...</option> 
 
     </select> 
 
     <label for="inputZip">write</label> 
 
     <input type="text" class="form-control" id="inputZip"> 
 
     <button type="submit" class="btn btn-secondary align-bottom">submit</button> 
 
    </form> 
 

 

 
</body> 
 
</html>

출처

2017-11-29 12:42:22 Super

나는 이미 그것을 시도했다, 그것은 작동하지 않았다 – BrotCast

@BotCast, 당신의 html로 업데이트 된 답변, 여분의 CSS를 추가 할 필요가 없습니다, 부트 스트랩 기본 클래스는 이것을 처리 할 수 있습니다. – Super

나는 이미 form-inline을 시도했다. 내 편이 지금은 함께 섞여있다. (텍스트 위에 버튼) – BrotCast

사용 인 flexbox 및 컬럼의 하부에있는 버튼을 정렬.

보기 전체 화면 보거나이 Codepen

.flex-bottom { 
 
    display: flex; 
 
    align-items: flex-end; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form> 
 
    <div class="form-row"> 
 
    <div class="form-group col-md-1"> 
 
     <label for="inputState">option</label> 
 
     <select id="inputState" class="form-control"> 
 
      <option selected>Choose...</option> 
 
      <option>...</option> 
 
     </select> 
 
    </div> 
 
    <div class="form-group col-md-1"> 
 
     <label for="inputZip">write</label> 
 
     <input type="text" class="form-control" id="inputZip"> 
 
    </div> 
 
    <div class="form-group col-1 flex-bottom "> 
 
     <button type="submit" class="btn btn-secondary ">submit</button> 
 
    </div> 
 
    </div> 
 
</form>

출처

2017-11-29 12:47:04

답변

관련 문제