并排引导 DIV [英] Bootstrap side by side DIV

查看：21
本文介绍了并排引导 DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人能告诉我为什么当第二个 div 中的文本字符串时，为什么这个 JSFiddle(导入的 Bootstrap CSS)中的 div 不是并排的更长?感谢您抽出时间帮助我.

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

<div class="row">
<div style='display:inline-block;border:1px 纯紫色;'>任何
<div style='display:inline-block;border:1px 纯红色;'>当这条线变得很长时，为什么 div 会堆叠在一起?我认为它们会并排，因为 div 的 display 属性设置为 inline block

解决方案

Flexbox 实际上为我服务，感谢您的帮助.

/* 最新编译和缩小的 CSS 作为外部资源*//* 可选主题 */@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');身体 {边距:10px；}.flexcontainer {显示:-webkit-flex；显示:弹性；-webkit-flex-direction: 行；弹性方向:行；}

 
<div class="flexcontainer"><div style='width: 50px;边框:1px 纯紫色;'>任何
<div style='border:1px 纯红色;'>当这条线变得很长时，为什么 div 会堆叠在一起?我认为它们会并排，因为 div 的 display 属性设置为 inline block

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>

解决方案

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>

这篇关于并排引导 DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆