Error in layout, scrolling left when line breaks

Navigation
0

I have in a part of a website a selection of hours. I'm trying to just leave the layout last, and the folks have made a mistake and I'm not sure how to fix it.

Here is a sample image, if you notice it, you will notice that from the second row the boxes are shifting to the left, very little, but they are.

I'musingbootstrap3.0.0.

Followthehtml

<divclass="container">
    <div class="row">
        <div class="col-md-8">
            <div id="viewHours">
                <div class="btn-group">
                    <label class="btn btn-default">
                        <input type="radio" value="08:00" name="optHour" />08:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="08:30" name="optHour" />08:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="09:00" name="optHour" />09:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="09:30" name="optHour" />09:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="10:00" name="optHour" />10:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="10:30" name="optHour" />10:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="11:00" name="optHour" />11:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="11:30" name="optHour" />11:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="13:00" name="optHour" />13:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="13:30" name="optHour" />13:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="14:00" name="optHour" />14:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="14:30" name="optHour" />14:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="15:00" name="optHour" />15:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="15:30" name="optHour" />15:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="16:00" name="optHour" />16:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="16:30" name="optHour" />16:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="17:00" name="optHour" />17:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="17:30" name="optHour" />17:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="18:00" name="optHour" />18:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="18:30" name="optHour" />18:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="19:00" name="optHour" />19:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="19:30" name="optHour" />19:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="20:00" name="optHour" />20:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="20:30" name="optHour" />20:30</label>
                    <label class="btn btn-default">
                        <input type="radio" value="21:00" name="optHour" />21:00</label>
                    <label class="btn btn-default">
                        <input type="radio" value="21:30" name="optHour" />21:30</label>
                </div>
            </div>
        </div>    
    </div>
</div>

And I made a single change in css to remove the rounded edges, but I've already removed it and that's not what's giving the error: 

#viewHours .btn-group>.btn {
    border-radius: 0
}

Follow Jsfiddle example

    
asked by anonymous 16.05.2014 / 20:48

2 answers

2

Put margin:0px in your class: 

#viewHours .btn-group>.btn {
    border-radius: 0;
    margin:0;
}

JSFiddle

    
16.05.2014 / 21:04
0

I tried using <table> here and it worked:

link

The only thing is that the number of items per line is fixed.

    
16.05.2014 / 20:57
Problems with angular - NPM How to customize java.io.IOException error message on Android?