twitter-bootstrap 一行两个 div(使用 col-md 和 col-md-offset Bootstrap)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27448742/
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-10-21 21:59:59  来源:igfitidea点击:

Two div's in one line(using col-md and col-md-offset Bootstrap)

csstwitter-bootstrap

提问by Andrew

I'm having two divs:

我有两个 div:

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

It looks like this:enter image description here

它看起来像这样:在此处输入图片说明

But I need it to look like this:

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

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

enter image description here

在此处输入图片说明

But I need to use offset.

但我需要使用偏移量。

回答by Yousof K.

The count of columns in an entire row is always 12.

整行中的列数始终为 12。

So, in your first code, you're reaching 19 columns therefore this is happening, you need to sum them up to 12.

因此,在您的第一个代码中,您将达到 19 列,因此正在发生这种情况,您需要将它们加起来为 12。

section 1: offset 1 + width 6 = 7 then section 2: offset 2 + width 3 = 5

第 1 部分:偏移 1 + 宽度 6 = 7 然后第 2 部分:偏移 2 + 宽度 3 = 5

Total: 12

总数:12

This should work.

这应该有效。

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

or anything that adds up to 12.

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

回答by Simone

What are you exactly trying to do? If you want it to look like the second image you can use:

你到底想做什么?如果您希望它看起来像第二张图片,您可以使用:

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

Or if you want an offset of, say, 3 columns between them, maybe you want something like:

或者,如果您想要它们之间的偏移量,例如 3 列,也许您想要以下内容:

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

If you want less offset, say two columns, increase the size of the first column accordingly, e.g.:

如果你想要更少的偏移量,比如两列,相应地增加第一列的大小,例如:

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

回答by TheLogicGuy

To show 2 Div's one on the far right and the other on the far left:

要在最右侧显示 2 Div 的一个,在最左侧显示另一个:

CSS:

CSS:

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

Inside Body tag:

身体内部标签:

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

Notice the pull-rightbootstrap's class. Alternatively you can use float:right.

注意pull-right引导程序的类。或者,您可以使用float:right.

回答by sanjith edward

It should be something like this.

它应该是这样的。

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