[css] 부트 스트랩 : 입력을 버튼에 정렬

부트 스트랩에서 버튼과 입력이 잘 정렬되지 않는 이유는 무엇입니까?

나는 다음과 같은 간단한 것을 시도했다.

<input type="text"/><button class="btn">button</button>

이 버튼은 5px크롬 / 파이어 폭스의 입력보다 약 합니다.

답변

트위터 부트 스트랩 4

Twitter Bootstrap 4에서 input-group-prepend및 input-group-append클래스를 사용하여 입력 및 버튼을 정렬 할 수 있습니다 ( https://getbootstrap.com/docs/4.0/components/input-group/#button-addons 참조 )

왼쪽의 그룹 버튼 (앞에 추가)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

오른쪽의 그룹 버튼 (추가)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

트위터 부트 스트랩 3

@abimelex의 답변에 표시된 것처럼 .input-group클래스 를 사용하여 입력 및 버튼을 정렬 할 수 있습니다 ( http://getbootstrap.com/components/#input-groups-buttons 참조 )

왼쪽의 그룹 버튼

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

오른쪽의 그룹 버튼

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

이 솔루션은 내 답변을 최신 상태로 유지하기 위해 추가되었지만 @abimelex에서 제공 한 답변에 투표를 하십시오 .

트위터 부트 스트랩 2

Bootstrap은 .input-append래퍼 요소로 작동 하는 클래스를 제공하며 이를 수정합니다.

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

그의 대답에 @OleksiyKhilkevich에 의해 지적, 정렬에 두 번째 방법이 input와 button사용하여 .form-horizontal클래스 :

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

차이점들

이 두 클래스의 차이점 은 요소 에 대해 위쪽 .input-append을 배치하고 (따라서 첨부 된 것처럼 보임) 공백이 배치된다는 것입니다.buttoninput.form-horizontal

— 노트 —

간격없이 input및 button요소를 서로 옆에 배치 할 수 있도록 클래스 에서 font-size가 설정되었습니다 ( 요소 사이의 흰색 간격이 제거됨 ). 또는 측정을 사용하여 기본값을 재정의하려는 경우 요소의 글꼴 크기에 악영향을 줄 수 있습니다 .0.input-appendinline-blockinputem%

답변

입력 그룹 버튼 속성 을 사용하여 버튼을 입력 필드에 직접 적용 할 수 있습니다 .

부트 스트랩 3 & 4

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

더 많은 예제를 보려면 BS4 입력 그룹 문서 를 살펴보십시오 .

bs3 입력 그룹 버튼의 예

답변

그냥 머리 위로, 이것에 대한 특별한 CSS 클래스가있는 것 같습니다. form-horizontal

input-append는 글꼴 크기를 0으로 떨어 뜨린다는 또 다른 부작용이 있습니다.

답변

Use .form-inline = 컴팩트 레이아웃을 위해 레이블과 인라인 블록 컨트롤을 왼쪽 정렬합니다.

예 : http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizontal = 레이블을 오른쪽 정렬하고 레이블을 왼쪽으로 띄워 두 열 형식 레이아웃에 더 적합한 컨트롤과 같은 줄에 표시되도록합니다.

(e.g.
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

예 : http://twitter.github.io/bootstrap/base-css.html#forms

답변

나는 무엇보다도 공유하고 싶은 몇 가지 변경 사항으로 끝났습니다. 나를 위해 작동하는 코드는 다음과 같습니다 (첨부 된 스크린 샷 찾기).

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

작동하는지 확인하려면 편집기에서 아래 코드를 사용하십시오.

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

도움이 되었기를 바랍니다.

답변

나는 또한 같은 문제로 어려움을 겪고 있었다. 내가 사용하는 부트 스트랩 클래스가 작동하지 않습니다. 다음과 같이 해결 방법을 생각해 냈습니다.

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..."
        class="form-control"
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit"
        class="btn btn-primary"
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

기본적으로 클래스 “form-control”의 표시 속성을 무시하고 크기와 위치를 수정하기 위해 다른 스타일 속성을 사용했습니다.

결과는 다음과 같습니다.

답변

부트 스트랩 4 :

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/