부트스트랩: 버튼에 입력 정렬
부트스트랩에서 버튼과 입력이 잘 정렬되지 않는 이유는 무엇입니까?
저는 다음과 같은 간단한 것을 시도했습니다.
<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">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
트위터 부트스트랩 3
@abimelex의 답변에 표시된 것처럼 입력과 버튼은 다음을 사용하여 정렬할 수 있습니다..input-group클래스(http://getbootstrap.com/components/ #input-groups-message 참조)
왼쪽의 그룹 버튼
<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
은 부트랩을 합니다..input-append클래스 - 래퍼 요소로 작동하고 이를 수정합니다.
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
가 그의 @Oleksiy Khilkevich를 하는 두 .input그리고.button를사여하를 .form-horizontal 명령어:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
차이
이 두 수업의 차이점은.input-append를 합니다.button에 하여.input 있는 ), 서 요따 (라서부것처보임럼된착위치소), 위치.form-horizontal그들 사이에 공간을 둘 겁니다
참고 --
허하기용을 input그리고.button띄어쓰기 , 소들은간서옆로있한에다어야이요격없▁to▁elements,,font-size 로설됨으로 되었습니다.0에 시대에.input-appendclass 은 클래스 합니다.)inline-block요소).이는 글꼴 크기에 악영향을 미칠 수 있습니다.input기본값를재요사용다니합을 사용하여 .em또는%측정
부트스트랩 5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
부트스트랩 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 또는 BS5 입력 그룹 문서를 참조하십시오.
헤드업,한 CSS 것 .form-horizontal
입력 신호는 글꼴 크기를 0으로 떨어뜨리는 또 다른 부작용이 있습니다.
.form-locks 사용 = 레이블과 인라인 블록 컨트롤을 왼쪽 정렬하여 컴팩트한 레이아웃을 만듭니다.
예: http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-contal = 레이블을 오른쪽 정렬하고 왼쪽으로 띄우면 컨트롤과 동일한 선에 나타나므로 2열 폼 레이아웃에 더 적합합니다.
(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>
기본적으로 클래스 "폼 컨트롤"의 표시 속성을 재정의하고 크기와 위치를 수정하기 위해 다른 스타일 속성을 사용했습니다.
결과는 다음과 같습니다.
부트스트랩 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/
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
저는 위의 코드를 모두 시도해 보았지만 어떤 코드도 제 문제를 해결하지 못했습니다.여기 제게 효과가 있었던 것이 있습니다.저는 입력 그룹 추가 기능을 사용했습니다.
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
직접적인 관련은 없습니다. 유사한 코드를 가지고 있지 않다면요. 하지만 저는 방금 폼인라인 부트스트랩 3.3.7에 대한 이상한 행동을 발견했습니다.
시작 태그가 테이블 아래에 있는 경우(이 경우), 데스크톱 프로젝트이기 때문에 행과 셀을 사용하지 않았습니다.
<table class="form-inline">
<form>
<tr>
폼 요소가 쌓입니다.
스위치를 켜면 올바르게 정렬됩니다.
<form>
<table class="form-inline">
<tr>
사파리 10.0.2와 최신 크롬은 차이가 없었습니다.아마도 내 배치가 잘못되었을 수도 있지만, 그것은 매우 관대하지 않습니다.
입력 플로트를 왼쪽으로 가져갑니다.그런 다음 버튼을 잡고 오른쪽으로 띄웁니다.둘 이상의 거리를 지정할 때 수정 클래스를 지울 수 있습니다.
<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>
style="padding-top: 8px"
행에서 div를 위 또는 아래로 이동하려면 이 옵션을 사용합니다.제게 놀라운 효과가 있습니다.
언급URL : https://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button
'programing' 카테고리의 다른 글
| Oracle SQL Developer 쿼리 결과 내보내기 마법사 기본 출력 파일 이름 (0) | 2023.07.28 |
|---|---|
| iOS에서 개인 정보 설정을 재설정할 수 있습니까? (0) | 2023.07.28 |
| CSS3 미디어 쿼리가 모바일 장치에서 작동하지 않는 이유는 무엇입니까? (0) | 2023.07.28 |
| MariaDB 완전 텍스트 색인을 사용하지 않는 매우 간단한 MATCH-AGHINE 쿼리? (0) | 2023.07.28 |
| mysql에서 100억 행의 키/값 테이블을 어떻게 정의합니까? (0) | 2023.07.28 |