트위터 부트 스트랩 4 입력 옆에 버튼을 두는 방법?

Question

부트 스트랩의 입력 옆에 단추를 배치하는 방법. 부트 스트랩 클래스를 무작위로 사용하여 CSS를 작성하거나 실행하면이 작업을 수행 할 수 있지만이 작업을 수행하는 좋은 방법을 알고 싶습니다. input-group-btn과 같은 버튼을 텍스트 필드에 병합하고 싶지 않습니다. 나는 버튼을위한 일반적인 부트 스트랩 스타일을 원한다.

|input     | //occupies the full width 
(button) //button comes to bottom 

내가 원하는 무엇 :

<div> 
    <input class="form-control" /> <button class="btn btn-primary">enter</button> 
</div> 

나는이 얻을

|input     | (button) //same "line". 

Answer 1

옵션 1 - form-inline 클래스 ... 또한

<div class="form-inline"> 
    <input class="form-control"> 
    <button class="btn btn-primary">enter</button> 
</div> 

, 당신은 mr-1가 (마진 오른쪽) 입력과 버튼 사이에 작은 마진을 추가 할 수 있습니다 https://www.codeply.com/go/5XCUJIEvua

옵션 2 - table-cell 클래스 ...

다른 옵션 (입력 및 버튼을 전체 너비로 표시하려는 경우)은 우리에게 있습니다 전자 d-table-cell 클래스 ..

<div class="d-table-cell w-100"> 
    <input class="form-control"> 
</div> 
<div class="d-table-cell align-middle"> 
    <button class="btn btn-primary">enter</button> 
</div> 

옵션 3-d-flex 클래스 ... 마지막으로

, 가장 쉬운 방법은 단순히 display:flex

<div class="d-flex"> 
     <input class="form-control mr-1"> 
     <button class="btn btn-primary">enter</button> 
</div> 

을 설정 D-플렉스를 사용 할 수있다

데모 총 3 가지 옵션 중
https://www.codeply.com/go/5XCUJIEvua

Answer 2

사용 input-groups :

body { 
 
    padding: 1rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <input type="text" class="form-control"> 
 
    <span class="input-group-btn"> 
 
    <button class="btn btn-success" type="button">Go!</button> 
 
    </span> 
 
</div>