Twitter Bootstrap：填充100％的网格宽度会包裹元素

Question

I have a problem that when using the Twitter Bootstrap Grid system the elements contained in the grid are wrapped around the end of the row, although the width of all the contained elements together is 100%.

Illustration here: http://www.bootply.com/KEm1U4bDVP

I tried to find for margins and paddings already but couldn't find any element that makes up that extra space to cause the wraparound.

Instead of using "30%" width for the last button I could use a value like 29%, but that is against my will. since the little extra spacing is becoming less and less when the screen width decreases.

How can I make the buttons to stay on one row and not be wrapped?

Answer 1

Buttons are inline-block elements. You have two options:

Floated elements: http://www.bootply.com/drrFPKsDPY

Or comment the spaces: http://www.bootply.com/RMoQw95WpJ

Answer 2

You have to use the grid-system correctly

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
          </div>
        </div>
    </div>
</div>

Answer 3

You can set the width using calc see fiddle: https://jsfiddle.net/eye4ytq2/1/

<button class="btn btn-primary" style="width: calc(30% - 5px)">1</button>
<button class="btn btn-primary" style="width: 40%">2</button>
<button class="btn btn-primary" style="width: calc(30% - 5px)">3</button>