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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:48:52  来源:igfitidea点击:

2 div next to each other in bootstrap

htmlcsstwitter-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:

图片说明:

enter image description here

在此处输入图片说明

回答by lschlessinger

Look into gridsin Bootstrap.

在 Bootstrap 中查看网格

You could do something like this:

你可以这样做:

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

回答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>