How to align elements within a well?

问题

I'm trying to align a button with some text in a well.

This is the best I can get:

<div class="container">
    <div class="row">
        <div class="col-lg-12">
             <div class="well"><h4>Download our 2016 Registration form today!<button type="btn" class="btn btn-default centered">Download Now!</button></h4>
             </div>
         </div>
     </div>
 </div>

CSS on the button:

btn {
background-color: #FFF;
outline-color: #000;
}

With the above I can't seem to get a space between the h4 and the btn... They're so tight together, padding & margin do not seem to help.

Previously I tried inserting the h4 and btn into col-md-8 and col-md-6 respectively, to have their own space, but I could not get it to align horizontally.

Then I read these posts on github https://github.com/twbs/bootstrap/issues/16933 .... https://github.com/twbs/bootstrap/issues/1446 ... Sounds like this issue has been around a while?

I'm using a well as I want to keep the h4 and btn close and in a field of red to attract attention.

Any help?

回答1:

Weave: http://kodeweave.sourceforge.net/editor/#6e1a68050ce5981e47e0512857f2dd73

You could use media queries for this.

CSS:

.btn {
  background-color: #FFF;
  outline-color: #000;
  display: inline-block;
  float: right;
  margin: -9px 0;
}
.well {
  text-align: left;
}

@media all and (max-width: 575px) {
  .well {
    text-align: center;
  }
  .btn {
    display: block;
    clear: both;
    float: none;
    text-align: center;
    margin: 20.92px auto;
  }
}

回答2:

It is common to use a <table><table/> to make your text aligned. put the button and the text in a table with 1 row and 2 columes

<table>
    <tr>
        <td>
            TEXT
        <td/>
        <td>
            BUTTON
        <td/>
    </tr>
<table/>

if you look around in websites (even this one) you will see that the page is one big table with buttons, textboxes, imgs in the tiles

来源：https://stackoverflow.com/questions/36805954/how-to-align-elements-within-a-well