search

salcode / bootstrap-genesis

WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt
MIT License
185 stars 63 forks source link

Buttons not rendering in a row #138

Closed salcode closed 8 years ago

salcode commented 8 years ago

When adding the following code in this theme, each button renders on a separate line (see left side of screenshot) while in a raw HTML document, they show up inline (see right side of screenshot)

        <div class="well">
            <h2>Button Styles</h2>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>      
        </div>
screenshot 2016-01-27 22 27 44
salcode commented 8 years ago

The culprit here is WordPress is auto-inserting <br> tags.

image

When the markup in WordPress is modified to:

        <div class="well">
            <h2>Button Styles</h2>
            <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>      
        </div>

the result is the same

image