부트 스트랩에서 버튼과 입력이 잘 정렬되지 않는 이유는 무엇입니까?
나는 다음과 같은 간단한 것을 시도했다.
<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%
5
답장을 보내 주셔서 감사합니다.하지만 여기에 문제가있는 것 같습니다. 부트 스트랩 구성 요소가 양식 요소와 정렬되기를 바라는 사람은 처음이 아닙니다.
—
pguardiario
@pguardiario-당신은 완전히 옳습니다. 그것은 잘못 보였고 내 뇌를 때린 후 나는
—
내 머리가 11
.input-append수업을 기억했다 .
이 작업을 수행하려면 래퍼 클래스가 필요합니다. 기본적으로 정렬되어 있지 않아야합니까?
—
opsb
@opsb 만약 그들이 같은 양의 수직 공간을 차지한다면 그들은 그렇습니다. 그러나 트위터 부트 스트랩의 입력 필드에는 a가
—
내 머리가 아프다
margin-bottom: 9px있지만 버튼은 같지 않으므로 동일한 수직 공간을 차지하지 않습니다. 두 요소 모두 middle세로로 정렬되므로 차이로 인해 단추가 오프셋됩니다. .input-append랩퍼를 사용 하면이 여백-하단 값이 제거됩니다.
맞습니다. 기본적으로 같은 세로 높이를 가진 다른 양식 레이아웃은 깨질 것입니다.
—
opsb
입력 그룹 버튼 속성 을 사용하여 버튼을 입력 필드에 직접 적용 할 수 있습니다 .
부트 스트랩 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 입력 그룹 문서 를 살펴보십시오 .
다른 사람은 나를 위해 일하지 않았다, 그러나 이것은 내가 원하는 방식으로했다. 감사합니다.
—
Colandus
나를 위해 클래스를 할당하기 위해 여분의 span 태그를 만들면 작동하지 않지만 해당 클래스를 div 태그에 추가하면 작동했습니다.
—
J0ANMM
<div class="form-group input-group-btn">
이 답변은 BS4에서 구식입니다. 내 답변을 살펴보십시오.
—
Alexander Kim
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]
)form-inlineBootstrap 3에서 작동 하는지 확인할 수 있습니다 . 감사합니다.
환상적인! 귀찮은 양식에 필요한 것!
—
its_notjack
.form-inline은 너비가 768px 이상인 뷰포트 내에서만 작동하는 것 같습니다 : w3schools.com/bootstrap/bootstrap_forms.asp
—
anemaria20
나는 무엇보다도 공유하고 싶은 몇 가지 변경 사항으로 끝났습니다. 나를 위해 작동하는 코드는 다음과 같습니다 (첨부 된 스크린 샷 찾기).
<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>도움이 되었기를 바랍니다.
어떤 부트 스트랩 버전입니까? 그리고 어떤 문제가 발생하지
—
Karl Adler
style="width:0;"않습니까?
width : 0을 사용하지 않으면 페이지의 전체 너비가 사용됩니다.
—
Abhimanyu
부트 스트랩 방식은
—
Karl Adler
<div class="col-md-4">필요 없음 과 같은 열 요소로 래핑 합니다width: 0
입력 컨트롤이 화면 전체를 차지하는 것을 원하지 않기 때문에 설정
—
Abhimanyu
나는 또한 같은 문제로 어려움을 겪고 있었다. 내가 사용하는 부트 스트랩 클래스가 작동하지 않습니다. 다음과 같이 해결 방법을 생각해 냈습니다.
<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>비슷한 코드가 없다면 직접 관련이 없지만 양식 인라인 부트 스트랩 3.3.7에 이상한 동작을 발견했습니다.
시작 태그가 테이블 아래 (이 경우)이면 데스크톱 프로젝트이므로 행과 셀을 사용하지 않았습니다.
<table class="form-inline">
<form>
<tr>양식 요소가 쌓입니다.
스위치와 올바르게 정렬되었습니다.
<form>
<table class="form-inline">
<tr>Safari 10.0.2와 최신 Chrome은 아무런 차이가 없었습니다. 어쩌면 내 레이아웃이 잘못되었지만 너무 관대하지는 않습니다.
입력 플로트를 왼쪽으로 가져갑니다. 그런 다음 버튼을 가져 와서 오른쪽으로 띄우십시오. 거리를 두 개 이상 가져 가면 클래스를 지울 수 있습니다.
<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name">
<div style="width:8%;float:left"> </div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>