使用Twitter Bootstrap的两个50%列

Question

如何使用Twitter Bootstrap 3创建2列50%的列？我尝试过的:

<div class="container">
<!-- Footer -->
  <div class="footer">
    <div class="footer-info">
      <div class="row">
        <div class="col-lg-6"><h3>Contact Us</h3></div>
        <div class="col-lg-6"><h3>Products & Services</h3></div>
    </div>      
    </div>
  </div>
</div>    
<!-- End Footer -->

Answer 1

这是你的答案:

Jsfiddle:http://jsfiddle.net/g9y4P/

总是50%的宽度

    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
</div> 

Answer 2

首先，为网格布局正确的语义

\n\n

为什么它在你的情况下不起作用？

\n\n

\n

• 你已经使用了col-lg-6（demo），它是 for ，你也必须为较小的屏幕尺寸提供 es ，这就是你错过的！！（演示只设置了一列来适应屏幕） Large devices Desktops (\xe2\x89\xa51200px)class

\n

• 另外，由于您遵循 BS 标记...定义容器的宽度始终是一个很好的做法，这样<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">可以使其适应各种视口！

\n

\n\n

演示

\n\n

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">\n    <div class="container">\n        <!-- Footer -->\n        <div class="footer" style="border:1px solid #000">\n            <div class="footer-info">\n                <div class="row">\n                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">\n                        <h3>Contact Us</h3>\n                    </div>\n                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">\n                         <h3>Products & Services</h3> \n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!--- //container -->\n</div>\n<!--- //col-xs-12 col-sm-12 col-md-12 col-lg-12-->\n<!-- End Footer -->\n

\n

Answer 3

我没有发现您发布的代码片段存在明显问题。你能发布你的完整 HTML 吗？JS Bin 或 JS Fiddle 将是理想的选择。

如果这对您不起作用，也许检查一下您是否有一个带有名为“container”的类的外部 div，以及您到 Bootstrap CSS 和 JS 文件的链接是否有效。