一行中有两个div（使用col-md和col-md-offset Bootstrap）

Question

我有两个div：

<div class="col-md-6 col-md-offset-1 "> </div>
<div class = "col-md-3 col-md-offset-9  "></div>

看起来像这样：

但我需要它看起来像这样：

<div class="col-md-6"> </div>
<div class = "col-md-3"> </div>

但我需要使用偏移。

Answer 1

整行中的列数始终为12。

因此，在您的第一个代码中，您将达到19列，因此会发生这种情况，您需要将它们总计为12个。

第1节：偏移1 +宽度6 = 7 然后 第2节：偏移2 +宽度3 = 5

总计：12

这应该有效。 <div class="col-md-6 col-md-offset-1 "> </div> <div class = "col-md-3 col-md-offset-2 "></div>

或任何加起来为12的东西。

Answer 2

你到底想干什么？如果您希望它看起来像您可以使用的第二个图像：

<div class="col-md-9"> </div>
<div class="col-md-3"> </div>

或者如果你想要它们之间的偏移量，比如3列，也许你想要这样的东西：

<div class="col-md-6 col-md-offset-3"> </div>
<div class="col-md-3"> </div>

如果您想要更少的偏移，比如两列，请相应地增加第一列的大小，例如：

<div class="col-md-7 col-md-offset-2"> </div>
<div class="col-md-3"> </div>

Answer 3

在最右边显示2个Div，在最左边显示另一个：

CSS：

.div1,.div2 {
    display: inline-block;
  }

Inside Body标签：

 <div class="div1">Div 1 content</div>
 <div class="div2 pull-right">Div 2 content</div>

注意pull-right bootstrap的类。或者，您可以使用float:right。

Answer 4

它应该是这样的。

class="col-md-6 col-md-offset-1"
class="col-md-3 col-md-offset-2"