问题描述:

I've created extremely simple form that contains 2 inputs and 2 buttons.

When I would like my form to take 6 spans width and be centered.

Below is my code:

<div class="container-fluid padded">

<div class="row">

<div class="container">

<div class="row">

<!--filtry-->

<div class="span6 offset3 padded" style="border: 1px solid black;">

<form action="#" method="get" class="form-horizontal">

<fieldset>

<div class="control-group">

<label class="control-label">Data od</label>

<div class="controls">

<input type="text" id="dataOd" class="input-xlarge" />

</div>

</div>

<div class="control-group">

<label class="control-label">Data do</label>

<div class="controls">

<input type="text" id="dataDo" class="input-xlarge" />

</div>

</div>

<div class="form-actions">

<div class="pull-right">

<a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>

<a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>

</div>

</div>

</fieldset>

</form>

</div>

</div>

</div>

</div>

</div>

My form in full size browser looks like this:

but after resizing it I get this result:

How should I change my code to get those input 100% width on every resolution?

Is there any simple way or do I must tweak whole bootstrap?


I've tried adding span* classes to inputs but without any luck.

There are similar questions on SO (http://stackoverflow.com/a/11193864/965722), but answer involves JavaScript and I would like to avoid that.

Here is jsfiddle with my code: http://jsfiddle.net/Misiu/HdSEn/

网友答案:

You need to increase the width of the span. Set span8 instead of span6.

Demo : jsfiddle.net/HdSEn/3

OR

If you want display full width of the box on page, add span12 instead of span6

jsfiddle.net/HdSEn/5/

Updated

 <div class="span7 offset3 padded well">

The problem is, form is greater than span7. Like form width> span7,6,5,4.... So you need to set width for input box.

Demo: http://jsfiddle.net/HdSEn/18

网友答案:

Hope this solves your issue:

JSFiddle Demo

CSS:

input[type="text"] {
    min-height:30px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
相关阅读:
Top