부트 스트랩 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 : 새로운 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)
자세한 내용은 Bootstrap 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;*/
}
난 당신이 내부의 입력을 포장 할 필요가 있다고 생각 col-lg-4하고 내부 form-group와 모든이에 포함됩니다 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>
Bootply에 데모 - http://bootply.com/78156
편집 : Bootstrap 3 문서에서 ..
부트 스트랩에서 입력, 선택 및 텍스트 영역의 너비는 기본적으로 100 %입니다. 인라인 양식을 사용하려면 사용 된 양식 컨트롤에서 너비를 설정해야합니다.
따라서 또 다른 옵션은 CSS를 사용하여 특정 너비를 설정하는 것입니다.
.form-control {
width:100px;
}
또는 col-sm-*`form-group '에 적용하십시오 .
현재 문서는 lg를 사용하지 않고 .col-xs-x 사용한다고 말합니다. 그런 다음 바이올린을 시도하고 작동하는 것 같습니다.
http://jsfiddle.net/tX3ae/225/
레이아웃을 유지하려면 다음과 같이 클래스 "row"를 놓는 위치를 변경할 수 있습니다.
<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에서 Master.Site 템플릿을 사용하는 경우 기본 프로젝트에는 양식 제어 필드의 너비를 초과하는 "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;
}
I know this is an old thread, but I experienced the same issue with an inline form, and none of the options above solved the issue. So I fixed my inline form like so:-
<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>
That was my solution. Bit hacky hack, but did the job for an inline form.
In Bootstrap 3
All textual < input >, < textarea >, and < select > elements with .form-control are set to width: 100%; by default.
http://getbootstrap.com/css/#forms-example
It seems, in some cases, we have to set manually the max width we want for the inputs.
Anyway, your example works. Just check it with a large screen, so you can see the name and email fields are getting the 2/12 of the with (col-lg-1 + col-lg-1 and you have 12 columns). But if you have a smaller screen (just resize your browser), the inputs will expand until the end of the row.
You don't have to give up simple css :)
.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
You can add the style attribute or you can add a definition for the input tag in a css file.
Option 1: adding the style attribute
<input type="text" class="form-control" id="ex1" style="width: 100px;">
Option 2: definition in css
input{
width: 100px
}
You can change the 100px in auto
I hope I could help.
If you're looking to simply reduce or increase the width of Bootstrap's input elements to your liking, I would use max-width in the CSS.
Here is a very simple example I created:
<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>
I've set the whole form's maximum width to 500px. This way you won't need to use any of Bootstrap's grid system and it will also keep the form responsive.
I'm also struggled with the same problem, and this is my solution.
HTML source
<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>
Cover input code with another div class
CSS source
.input_width{
width: 450px;
}
give any width or margin setting on covered div class.
Bootstrap's input width is always default as 100%, so width is follow that covered width.
This is not the best way, but easiest and only solution that I solved the problem.
Hope this helped.
Bootstrap 3 I achieved a nice responsive form layout using the following:
<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>
I do not know why everyone has seem to overlook the site.css file in the Content folder. Look at line 22 in this file and you will see the settings for input to be controlled. It would appear that your site is not referencing this style sheet.
I added this:
input, select, textarea { max-width: 280px;}
to your fiddle and it works just fine.
You should never ever update bootstrap.css or bootstrap.min.css. Doing so will set you up to fail when bootstrap gets updated. That is why the site.css file is included. This is where you can make changes to site that will still give you the responsive design you are looking for.
Here is the fiddle with it working
Add and define terms for the style="" to the input field, that's the easiest way to go about it: Example:
<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>
Bootstrap uses the class 'form-input' for controlling the attributes of 'input fields'. Simply, add your own 'form-input' class with the desired width, border, text size, etc in your css file or head section.
(or else, directly add the size='5' inline code in input attributes in the body section.)
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
참고URL : https://stackoverflow.com/questions/18539711/input-widths-on-bootstrap-3
'IT story' 카테고리의 다른 글
| 닫고 처리-전화? (0) | 2020.06.11 |
|---|---|
| 생성자가 예외를 발생시키는 것이 좋은 습관입니까? (0) | 2020.06.11 |
| 응용 프로그램을 올바르게 시작할 수 없습니다 (0xc000007b) (0) | 2020.06.11 |
| msys, msys2 및 msysgit는 서로 어떻게 관련되어 있습니까? (0) | 2020.06.11 |
| SVN 파일의 이전 버전을 보려면 어떻게합니까? (0) | 2020.06.11 |