twitter-bootstrap 两个带有 Twitter Bootstrap 的 50% 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21106503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two 50% columns with Twitter Bootstrap
提问by Ch'an Armstrong
How do create 2 columns of 50% with Twitter Bootstrap 3? What I've tried:
如何使用 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 -->
回答by Samira Khorshidi
It's your answer:
这是你的答案：
Jsfiddle : http://jsfiddle.net/g9y4P/
jsfiddle：http: //jsfiddle.net/g9y4P/
always 50% width
总是 50% 宽度
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
回答by NoobEditor
First, layout the proper semantic for the grid
首先，为网格布局正确的语义
Why it's not working in your case??
为什么它在你的情况下不起作用？
You have used
col-lg-6(demo) which is forLarge devices Desktops (≥1200px), you have to gives theclasses for smaller screen sizes too, thats what you missed!!(demo with only one column set to adapt to screens)Also, since you are following BS markup...its always a good practice to define the width of your container like
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">which makes it adapt to various viewports!
您已经使用了
col-lg-6(demo) ，您也必须为较小的屏幕尺寸提供es ，这就是您错过的！（只有一列设置为适应屏幕的演示）Large devices Desktops (≥1200px)class此外，由于您遵循 BS 标记……定义容器的宽度始终是一个好习惯，例如
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">使其适应各种视口！
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<!-- Footer -->
<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>
<!--- //container -->
</div>
<!--- //col-xs-12 col-sm-12 col-md-12 col-lg-12-->
<!-- End Footer -->
回答by Chase
According to twitter bootstrap:
根据推特引导：
Rows must be placed within a .container for proper alignment and padding.
行必须放置在 .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>
回答by kamus
I cant see the problem′:
我看不到问题'：
you can try using
你可以尝试使用
.col-md-6instead of .col-xs-6
.col-md-6代替 .col-xs-6
you can check the documentation here:
您可以在此处查看文档：
回答by Neil Cresswell
I'm not seeing an obvious issue with the snippet you posted. Can you post your full HTML? A JS Bin or JS Fiddle would be ideal.
我没有看到您发布的代码段有明显的问题。你能发布完整的 HTML 吗？JS Bin 或 JS Fiddle 将是理想的选择。
If that doesn't work for you, perhaps check that you've an outer div with a class called "container", and that your links to the Bootstrap CSS and JS files are valid.
如果这对您不起作用，请检查您的外部 div 是否带有一个名为“容器”的类，并且您指向 Bootstrap CSS 和 JS 文件的链接是否有效。
回答by Rijo
col-xs-*has been dropped in Bootstrap 4+ in favor of col-*
col-xs-*已在 Bootstrap 4+ 中删除，以支持 col-*
Please find the answer here: `col-xs-*` not working in Bootstrap 4
请在此处找到答案：`col-xs-*` 在 Bootstrap 4 中不起作用
