0

I am trying to setup a simple form with Twitter Bootstrap. The problem is that fields that are sized as "col-md-6" are not editable, so no values can be inserted. I think this happens as the "col-md-12" class is overlapping the smaller one:

enter image description here

How can I fix this?

<div class="col-md-12">
    <div class="controls">
        <div class="padded">

            <div class="col-md-12">
                <label class="control-label">Firmenname:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-12">
                <label class="control-label">Strasse + Hausnummer:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>


            <div class="col-md-6">
                <label class="control-label">PLZ:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-6">
                <label class="control-label">Stadt:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-6">
                <label class="control-label">E-Mail Adresse:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-6">
                <label class="control-label">Telefonnummer:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>
            <div class="col-md-6">
                <label class="control-label">Land:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-6">
                <label class="control-label">Handelsregister-Nummer:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>


            <div class="col-md-12">
                <label class="control-label">Facebook Fanseite:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-12">
                <label class="control-label">Twitter Profil:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

            <div class="col-md-12">
                <label class="control-label">Google+ Seite:</label>
                <div class="controls">
                    <input type="text" name="" required="required" />
                </div>
            </div>

        </div>                                  
    </div>
</div>
nimrod
  • 5,595
  • 29
  • 85
  • 149
  • Could you provide a quick fiddle? It's not appearing alike yours in [**mine**](http://jsfiddle.net/Z8QBb/), apologies. – MackieeE Apr 11 '14 at 18:00

1 Answers1

0

I had the same problem. Found this other post at stack overflow (Input widths on Bootstrap 3) which said "wrap each 'group' in a row" - I tried it and it worked like a charm.

I hope it will solve your problem if you still have it.

Community
  • 1
  • 1
user2100789
  • 61
  • 1
  • 3