Why is bootstrap input-group & input-group-addon splitting?

Question

I have an input-group in a form-horizontal div, and it looks great on a large screen. It also looks great in bootply, but whenever I start resizing the screen the form wraps, (which is ok) but input-group-addon splits or separates from the input-group. I have tried numerous combinations of css and styling.

How can I prevent this behaviour?

On large screen:

on small screen: the html:

<div class="row">
    <div class="form-horizontal">
        <div class="form-group form-group-justified" >
            <label class="control-label col-md-2" for="Start">Start</label>
            <div class="col-md-2">
                <div class="input-group date">
                    <input value="24/07/14" class="form-control" />
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                </div>
                <span class="field-validation-valid text-danger" data-valmsg-for="Start.Date" data-valmsg-replace="true"></span>
            </div>
            <div class="col-md-3">
                <select class="form-control combo" data-val="true" data-val-required="The DaySelection field is required." id="Start_DaySelection" name="Start.DaySelection">
                    <option selected="selected">Full</option>
                    <option>HDBL</option>
                    <option>HDAL</option>
                    <option>Other</option>
                </select>
            </div>

            <div class="col-md-4"  style="display: none;">
                <div class="col-md-6">
                    <input class="form-control" id="Start_From" name="Start.From" placeholder="From" type="text" value="" />
                </div>
                <div class="col-md-6">
                    <input class="form-control" id="Start_To" name="Start.To" placeholder="To" type="text" value="" />
                </div>
            </div>
            <div class="col-md-6">
            </div>

            <span class="field-validation-valid text-danger" data-valmsg-for="Start" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

Answer 1

Bootstrap 3 provided with .col-xs-, .col-md-, .col-lg- with respect to the display size of the rendering device

Replace the class="col-md- with the class="col-xs- in you HTML codes and have a try

Good day

Answer 2

This:

<div class="col-md-4"  style="display: none;">
    <div class="col-md-6">

is wrong. A column can't be a child of a column. You need a layer of row between them:

<div class="col-md-4"  style="display: none;">
    <div class="row">
        <div class="col-md-6">

Answer 3

i had a similar problem, I have changed the col-md to -xs but it still did not help. Here is thecode:

   <div id="collapseGeneral" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div class="form-inline form-group form-group-justified">
                    @Html.ChqLabelFor(m => m.Date, new
                       {
                           @class = "col-xs-2 control-label"
                       })
                    ****<div class="col-xs-5">****
                        <div class='input-group date' id='datetimeFrom'>
                            @*K*@
                        @Html.TextBoxFor(m => m.Date, new
                               {
                                   @class = "form-control"
                               })
                        <span class="input-group-addon clearfix">
                            <span class="glyphicon glyphicon-calendar"> </span>
                        </span>
                    </div>
                </div>
            </div>

And the problem was resolved with setting the second col-xs to 5, before it was 10, on 6 it also splits but less than on higher values, it changes size, but does not split.

Answer 4

If you're coding in Visual Studio, when it creates new project, there is css file which limits .form-control width to 300px. Comment this block and it will work ok.