Bootstrap side by side DIV

问题

Would somebody be able to tell me why the divs in this JSFiddle (Bootstrap CSS imported) are not side by side when the string of text in the second div is longer? I appreciate you taking the time to help me.

https://jsfiddle.net/DTcHh/13602/

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline-block;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline-block;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

回答1:

Flexbox actually served me proper, thank you for your help.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
   flex-direction: row;
}

  <div class="container">
        <div class="flexcontainer">
              <div style='width: 50px; border:1px solid purple;'>
                whatever
              </div>
              <div style=' border:1px solid red;'>
              Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
              </div>
            </div>
        </div>
    </div>

回答2:

You can set the width for inline-block. https://jsfiddle.net/DTcHh/13604/.

<div style='display:inline-block; width: 20%; border:1px solid purple;'>
whatever
</div>
<div style='display:inline-block; width: 70%;border:1px solid red;'>
Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
</div>

I recommend using the bootstrap grid instead of defining inline-block like the above. For example, <div class="col-md-3> etc. https://getbootstrap.com/examples/grid/

回答3:

Maybe, it's because of inline-block. Try using just inline:

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

来源：https://stackoverflow.com/questions/33319893/bootstrap-side-by-side-div

标签

twitter-bootstrap-3