怎样让这两个span在一行上面?

为什么缩小宽度以后不是sp3先折行呢而是先掉了下来? 如果不用删格系统而用百分比的话就可以始终在同一行上面 但是用删格就掉下来了 这是为什么? 我想让sp3先折行 sp2和sp3始终在一行上面 应该怎么办呢?
图片描述

<style type="text/css">
   #sp2{display: inline-block;min-height: 40px;text-align: center;font-size: 10px;background-color: red;}
   #sp3{min-height: 40px;display: inline-block;background-color: blue;word-break: break-all;}
</style>
<span id="sp1" class="row">
  <span id="sp2" class="col-sm-2 col-md-2 col-lg-2">aaaaaaaaaaaa</span>
  <span id="sp3" class="col-sm-10 col-md-10 col-lg-10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</span>
阅读 9.4k
4 个回答

你加一个col-xs-2设置更下屏幕的适配,刚刚测试了是可以的,你看下代码
图片描述

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>

    <style type="text/css">
    #sp2{display: inline-block;min-height: 40px;text-align: center;font-size: 10px;background-color: red;}
    #sp3{min-height: 40px;display: inline-block;background-color: blue;word-break: break-all;}
    </style>
<span id="sp1" class="row">
  <span id="sp2" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">aaaaaaaaaaaa</span>
  <span id="sp3" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</span>

不知道你是不是想实现文字环绕效果,如果是的话,建议不用inline-block;而采用浮动sp1和sp2,希望这里对你有帮助:inline-block与float

加上xs没有掉下来 但是折行的那一部分跑到sp2的下面了 怎么样只让它在sp3下面呢
图片描述

<span id="sp1" class="row">
  <span id="sp2" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">aaaaaaaaaaaa</span>
  <span id="sp3" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</span>

应该是你的屏幕适配度不正确,sm是768px以上的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进