Bootstrap side by side DIV

dps

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>

dps

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>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

TOP lista

quentelabel

Arquivo