Html 2 个 div 在引导程序中彼此相邻
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23686786/
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
2 div next to each other in bootstrap
提问by user3423384
I'm trying to show two divs next to each other using Bootstrap, but there is a distance between them. How can i place them exactly next to each other.
我正在尝试使用 Bootstrap 显示彼此相邻的两个 div,但它们之间存在距离。我怎样才能将它们完全相邻放置。
The code:
编码:
<div class="col-lg-8 col-lg-offset-2 centered">
<div style="float: left; border: 1px solid; width: 227px; height: 50px;"></div>
<div style="float: right; border: 1px solid;width: 227px; height: 50px;"></div>
</div>
Image illustration:
图片说明:
回答by lschlessinger
回答by Mike W
Adding to Lschessinger's answer you could use offset to center the blocks. Look hereunder Offsetting columns
添加到 Lschessinger 的答案中,您可以使用偏移量将块居中。在偏移列下查看此处
Maybe this is what you're looking for?
也许这就是你要找的?
<style>
.border {border: 1px solid #CCC;}
</style>
<div class="row">
<div class="col-xs-2 border col-xs-offset-4">div 1</div>
<div class="col-xs-2 border">div 2</div>
</div>
Or if you have to stick to your code with the inline styles and specific widths then maybe this, you can increase the width between by increasing the width 454px to 464px for a 10px gap, and so on:
或者,如果您必须坚持使用内联样式和特定宽度的代码,那么您可以通过将宽度 454px 增加到 464px 以增加 10px 间隙的宽度,依此类推:
<div class="col-lg-12">
<div style="width: 454px;" class="center-block">
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-left"></div>
<div style="border: 1px solid; width: 227px; height: 50px;" class="pull-right"></div>
</div>
</div>