Question

如何使用Twitter Bootstrap 3创建50％的2列？我尝试了什么：

<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

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

为什么它不适用于你的情况？

您使用的是col-lg-6（ ~~demo~~ ）Large devices Desktops (≥1200px)，您必须为class提供较小的<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> es屏幕尺寸也是如此，这就是你错过的！（ demo with only one column set to adapt to screens ）
此外，由于您正在关注BS标记...它总是一个很好的做法来定义容器的宽度，如<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="container">  <div class="footer" style="border:1px solid #000"> <div class="footer-info"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h3>Contact Us</h3> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <h3>Products & Services</h3> </div> </div> </div> </div> </div>  </div>  ，这使它适应各种视口！

demo

{{1}}

Answer 3

根据twitter bootstrap：

必须将行放在.container中才能正确对齐和填充。

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

http://getbootstrap.com/css/#grid-intro

Answer 4

我看不出问题'：

http://jsfiddle.net/AYd5t/

您可以尝试使用

.col-md-6代替.col-xs-6

您可以在此处查看文档：

http://getbootstrap.com/css/#grid

Answer 5

我没有看到您发布的代码段的明显问题。你可以发布完整的HTML吗？ JS Bin或JS Fiddle是理想的。

如果这对您不起作用，或许检查您是否有一个名为＆＃34; container＆＃34;的类的外部div，并且您指向Bootstrap CSS和JS文件的链接是有效的。

Answer 6

col-xs-*已在Bootstrap 4及更高版本中删除，取而代之的是col-*

请在这里找到答案：`col-xs-*` not working in Bootstrap 4

使用Twitter Bootstrap的两个50％列

6 个答案: