Question

我正在尝试将一行分成两行，用于文本和图像。但是，无论我设置div的大小，它们都会显示在不同的行上。

<div class="container-fluid">
  <div class="row">
     <div class="col-md-12">
       <ul class="nav">
         <li><a class="home" href="#home>">Home</a><li>
         <li><a href="#about">About</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </div>
  </div>
  <div class="row">
    <div class="col-md-6" id="first">JUSDHFLKSADHFLK</div>
    <div class="col-md-6" id="second">JKSDNF,ASDNF,ASD</div>
  </div>
</div>

我对这个简单的问题感到痛苦，并仔细检查了文档。我错过了一些简单的东西吗？

代码使用codepen.io

编写

没有CSS，宽度足够大于col-md

谢谢

Answer 1

使用display:inline-block;设置所需的宽度，这样可以使div完全达到您给出的宽度

Answer 2

如果您的引导程序正确加载，则可能会将其加载到col-md-6的太小的屏幕上。以下是使用col-xs-6的工作示例，因此您可以看到它们并排工作 - ＆gt; https://jsfiddle.net/mmcshinsky/kgb52j3e/

Answer 3

我忘了在codepen设置中包含用于bootstrap的外部CSS：）

感谢您的帮助！

同一行中的div不会一起显示

3 个答案: