使用Bootstrap 3设置内联表单输入的样式

Question

I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event. On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order. I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited. Using w3schools and other tutorial sites I have arrived at this:

    <div class="form-group form-group-sm">
        <p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
        <label class="col-xs-1" for="shirt-s">S</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-s">
        </div>
        <label class="col-xs-1" for="shirt-m">M</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-m">
        </div>
        <label class="col-xs-1" for="shirt-l">L</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-l">
        </div>
        <label class="col-xs-1" for="shirt-xl">XL</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-xl">
        </div>
        <label class="col-xs-1" for="shirt-xxl">XXL</label>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="shirt-xxl">
        </div>
        <div class="col-xs-2">&nbsp;</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

See jsfiddle:

https://jsfiddle.net/tonvanbart/83nbny8h/5/

Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.

Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.

Feel free to let me know if you need more information.

Answer 1

Here's the fixed code:

https://jsfiddle.net/ccx9x7om/1/

I added the following CSS

.row .form-group label, .row .form-group input {
  display: inline-block;
}

.row .form-group input {
  width: 50%;
}

button {
  margin: 25px;
}

In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid . I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.

Answer 2

Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.

This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns .

*Note: The form-group class isn't necessary, it simply adds padding around your inputs.

See working Snippet at FullPage.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <form> <h2>Order a Shirt</h2> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="name">Name</label> <input type="password" class="form-control" id="name" placeholder="Your Name"> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Email address (never shown)"> </div> </div> <div class="col-sm-6"> <div class="row"> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label for="shirt-s">S</label> <input class="form-control" type="text" id="shirt-s"> </div> </div> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label for="shirt-m">M</label> <input class="form-control" type="text" id="shirt-m"> </div> </div> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label for="shirt-l">L</label> <input class="form-control" type="text" id="shirt-l"> </div> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label for="shirt-xl">XL</label> <input class="form-control" type="text" id="shirt-xl"> </div> </div> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label for="shirt-xxl">XXL</label> <input class="form-control" type="text" id="shirt-xxl"> </div> </div> <div class="col-xs-4 col-sm-4"> <div class="form-group"> <label>Order Now</label> <button type="submit" class="btn btn-success btn-block btn-submit">Submit</button> </div> </div> <div class="col-xs-12"> <p class="help-block">Please select the number of T-shirts per size you would like to order.</p> </div> </div> </div> </div> </form> </div>