부트스트랩 3의 입력 폭
다시 업데이트:질문을 제대로 이해하지 못한 상태에서 답변을 추가하지 못하도록 상위 답변을 선택하여 이 질문을 마칩니다.실제로는 그리드를 사용하거나 추가 CSS를 추가하지 않고서는 빌드 인 기능으로 이를 수행할 방법이 없습니다.처리할 경우 그리드가 제대로 작동하지 않습니다.help-block예를 들어 짧은 입력을 넘어서야 하지만 '빌트인' 상태인 요소.그것이 문제라면 여기 BS3 토론에서 확인할 수 있는 추가 CSS 클래스를 사용하는 것을 추천합니다.이제 BS4가 출시되었기 때문에 이를 관리하기 위해 포함된 사이징 스타일을 사용할 수 있습니다. 따라서 이 작업은 더 이상 관련이 없을 것입니다.이 인기있는 SO 질문에 대해 좋은 의견을 주셔서 모두 감사합니다.
업데이트: 이 질문은 그리드에 의존하지 않고 입력 폭을 관리하기 위한 BS의 내장 기능에 관한 것이기 때문에 여전히 열려 있습니다(때로는 독립적으로 관리해야 합니다).나는 이미 커스텀 클래스를 사용하여 이것을 관리하고 있기 때문에 이것은 기본적인 CSS에 대한 사용법이 아닙니다.이 작업은 BS 기능 토론 목록에 있으며 아직 해결되지 않았습니다.
원래 질문:BS 3에서 입력 폭을 관리하는 방법을 아는 사람?현재 사용자 지정 클래스를 사용하여 해당 기능을 추가하고 있지만 문서화되지 않은 옵션을 일부 놓쳤을 수 있습니다.
현재 문서에서는 .col-lg-x를 사용해야 한다고 하지만 컨테이너 div에만 적용할 수 있기 때문에 분명히 작동하지 않습니다. 그러면 모든 종류의 레이아웃/플로트 문제가 발생합니다.
여기 바이올린이 있습니다.이상한 것은 제가 폼 그룹의 크기를 조정할 수도 없다는 것입니다.
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
당신이 하고 싶은 일은 확실히 이룰 수 있습니다.
당신이 원하는 것은 각 '그룹'을 한 줄로 묶는 것이지, 한 줄로만 전체 형태를 묶는 것이 아닙니다.여기:
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<form role="form">
<div class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
내가 만든 새로운 jsfiddle: NEW jsfiddle
새 피들에서는 'col-xs-5'도 추가되어 더 작은 화면에서도 볼 수 있습니다. 제거해도 아무런 차이가 없습니다.하지만 원래 수업에서는 'col-lg-1'만 사용하고 있다는 것을 기억하세요.즉, 화면 너비가 'lg' 미디어 쿼리 크기보다 작으면 기본 블록 동작이 사용됩니다.기본적으로 'col-lg-1'만 적용하면 사용하는 논리는 다음과 같습니다.
IF SCREEN WIDTH < 'lg' (1200px by default)
USE DEFAULT BLOCK BEHAVIOUR (width=100%)
ELSE
APPLY 'col-lg-1' (~95px)
자세한 내용은 부트스트랩 3 그리드 시스템을 참조하십시오.제가 분명히 했음 좋겠어요 그렇지 않으면 제게 알려주세요. 그리고 자세히 말씀드리겠습니다.
부트스트랩 3에서
간단히 사용자 정의 스타일을 만들 수 있습니다.
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
}
다음과 같은 폼 컨트롤에 추가합니다.
<div class="controls">
<select id="expirymonth" class="form-control form-control-inline">
<option value="01">01 - January</option>
<option value="02">02 - February</option>
<option value="03">03 - March</option>
<option value="12">12 - December</option>
</select>
<select id="expiryyear" class="form-control form-control-inline">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
이렇게 하면 HTML에 레이아웃을 위한 마크업을 추가할 필요가 없습니다.
ASP.net MVC는 Content-Site.css로 이동하여 다음 행을 제거하거나 주석을 달립니다.
input,
select,
textarea {
/*max-width: 280px;*/
}
입력된 내용을 A 내부에 포장해야 할 것 같습니다.col-lg-4, 그리고 그 안에서form-group그리고 모든 것이 A에 담겨져 있습니다.form-horizontal..
<form class="form form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="email">
</div>
</div>
...
</form>
부트플라이의 데모 - http://bootply.com/78156
편집: 부트스트랩 3 문서에서..
입력, 선택 및 텍스트 영역은 부트스트랩에서 기본적으로 100% 너비입니다.인라인 폼을 사용하려면 내에서 사용되는 폼 컨트롤에 너비를 설정해야 합니다.
따라서 CSS를 사용하여 특정 너비를 설정하는 것도 또 다른 옵션입니다.
.form-control {
width:100px;
}
아니면, 적용.col-sm-*'형태 그룹'으로 이동합니다.
현재 문서에서는 .col-xs-x를 사용하고 lg는 사용하지 말라고 합니다.그 다음에는 만지작거리는데 효과가 있는 것 같습니다.
http://jsfiddle.net/tX3ae/225/
레이아웃을 유지하려면 클래스 "행"을 다음과 같이 배치하는 위치를 변경할 수 있습니다.
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<div class="row">
<form role="form" class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" >
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
http://jsfiddle.net/tX3ae/226/
<div class="form-group col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
입력을 제한하려면 form.group에 클래스를 추가합니다.
마스터를 사용하는 경우.Visual Studio 15의 사이트 템플릿으로, 기본 프로젝트에는 양식-제어 필드의 너비를 재정의하는 "Site.css"가 있습니다.
텍스트 상자의 너비가 300px 이상이 되도록 할 수 없었습니다.저는 모든 것을 시도해 보았지만 아무 것도 되지 않았습니다.문제의 원인이 되는 Site.css에 설정이 있음을 발견하였습니다.
이것을 제거하면 필드 폭을 제어할 수 있습니다.
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
이것이 오래된 스레드라는 것을 알고 있지만, 인라인 형태로 동일한 문제를 경험했고, 위의 어떤 옵션도 문제를 해결하지 못했습니다.그래서 인라인 폼을 이렇게 고쳤습니다:-
<form class="form-inline" action="" method="post" accept-charset="UTF-8">
<div class="row">
<div class="form-group col-xs-7" style="padding-right: 0;">
<label class="sr-only" for="term">Search</label>
<input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
<span class="help-block">0 results</span>
</div>
<div class="form-group col-xs-2">
<button type="submit" name="search" class="btn btn-success" id="search">Search</button>
</div>
</div>
</form>
그것이 제 해결책이었습니다.약간 해킹이 심하긴 하지만 인라인 형태로 작업을 했습니다.
스타일 속성을 추가하거나 입력 태그에 대한 정의를 CSS 파일에 추가할 수 있습니다.
옵션 1: 스타일 속성 추가
<input type="text" class="form-control" id="ex1" style="width: 100px;">
옵션 2: CSS에서의 정의
input{
width: 100px
}
자동으로 100px를 변경할 수 있습니다.
제가 도울 수 있었으면 좋겠네요.
부트스트랩 3에서
.form-control을 사용하는 모든 텍스트 < 입력 >, < 텍스트 영역 > 및 < select > 요소는 기본적으로 너비: 100%로 설정됩니다.
http://getbootstrap.com/css/ #양식-
경우에 따라 입력에 필요한 최대 너비를 수동으로 설정해야 하는 것 같습니다.
어쨌든 당신의 본보기는 효과가 있습니다.큰 화면으로 확인만 하면 이름과 이메일 필드가 위드(col-lg-1 + col-lg-1)의 2/12가 표시되고 열이 12개입니다.그러나 화면 크기가 더 작은 경우(브라우저 크기만 조정) 입력은 행 끝까지 확장됩니다.
간단한 CSS를 포기하지 않아도 됩니다 :)
.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
부트스트랩의 입력 요소의 폭을 원하는 대로 단순하게 줄이거나 늘리는 방법을 찾는다면 다음을 사용합니다.max-widthCSS에
제가 만든 아주 간단한 예는 다음과 같습니다.
<form style="max-width:500px">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
양식 전체의 최대 너비를 500px로 설정했습니다.이렇게 하면 부트스트랩의 그리드 시스템을 사용할 필요가 없고, 형태의 응답성도 유지할 수 있습니다.
저도 같은 문제로 고민하고 있고, 이것이 제 해결책입니다.
HTML 소스
<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>
다른 div 클래스로 입력 코드 커버
CSS 소스
.input_width{
width: 450px;
}
커버드 디브 클래스에 너비 또는 여백 설정을 제공합니다.
부트스트랩의 입력 폭은 항상 기본값인 100%이므로 폭은 해당 커버 폭을 따릅니다.
이것이 최선의 방법이 아니라 제가 문제를 해결한 가장 쉽고 유일한 해결책입니다.
도움이 됐기를 바랍니다.
왜 모든 사람들이 컨텐츠 폴더의 site.css 파일을 간과하는 것처럼 보였는지 모르겠습니다.이 파일의 22번 줄을 보면 제어할 입력에 대한 설정이 표시됩니다.사이트에서 이 스타일시트를 참조하지 않는 것으로 나타납니다.
다음과 같이 덧붙였습니다.
input, select, textarea { max-width: 280px;}
당신의 바이올린에 맞춰서, 그것은 잘 작동합니다.
bootstrap.css 또는 bootstrap.min.css를 업데이트하면 안 됩니다.이렇게 하면 부트스트랩이 업데이트될 때 실패하도록 설정됩니다.그래서 site.css 파일이 포함되어 있습니다.이 부분에서 사이트를 변경할 수 있으며 여전히 원하는 응답형 디자인을 제공할 수 있습니다.
에 대한 용어를 추가 및 정의합니다.style=""입력 필드로 이동하는 것이 가장 쉬운 방법입니다. 예:
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" style="width:200px;">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" style="width:200px">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
부트스트랩은 '입력 필드'의 속성을 제어하기 위해 '폼-입력' 클래스를 사용합니다.간단히, CSS 파일 또는 헤드 섹션에 원하는 너비, 테두리, 텍스트 크기 등으로 자신만의 '양식 입력' 클래스를 추가하면 됩니다.
(아니면 본문 섹션의 입력 속성에 size='5' 인라인 코드를 직접 추가합니다.)
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
부트스트랩 3 I은 다음을 사용하여 응답성이 좋은 폼 레이아웃을 달성했습니다.
<div class="row">
<div class="form-group col-sm-4">
<label for=""> Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder=" date">
</div>
<div class="form-group col-sm-4">
<label for="hours">Hours</label>
<input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
</div>
</div>
언급URL : https://stackoverflow.com/questions/18539711/input-widths-on-bootstrap-3
'programing' 카테고리의 다른 글
| PHP IDE가 종속성 주입 용기를 이해하도록 하려면 어떻게 해야 합니까? (0) | 2023.10.24 |
|---|---|
| mysql_fix_privilege_ 동안 mysql_업그레이드가 실패함 (0) | 2023.10.19 |
| ImageView(이미지 보기)에서 "애니메이션 서클"을 사용하여 작업 로드 (0) | 2023.10.19 |
| avg 및 그룹을 사용한 SQL 쿼리 (0) | 2023.10.19 |
| MariaDB 시퀀스가 음수를 생성하는 이유는 무엇입니까? (0) | 2023.10.19 |