Question

当网站转到-lg-尺寸时，我希望它看起来像这样：

期望的结果：

但我最终只能这样做：

实际结果：

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

我想要的是否可能，或者这不是引导程序的最佳设计？

https://jsfiddle.net/clankill3r/0o1mz65n/

Answer 1

添加content类以设置col-xs-12 col-lg-8和content类添加左右填充0以根据需要设置..

#title {
    background-color: aqua;
}

#menu {
  background-color: aquamarine;
}

.content {
  background-color: orange;
  padding-left:0px;
  padding-right:0px;
}

// Small devices (landscape phones, 34em and up)
@media (max-width: 33.9em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { 
  body {
    background-color: rgba(10,10,200,0.1);
  }
}

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { 
  body {
    background-color: rgba(10,10,200,0.3);
  }
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { 
  body {
    background-color: rgba(10,10,200,0.4);
  }
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-xs-12 col-lg-8">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>
  
</div>

Answer 2

如何将col-lg-4添加到内容div？

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-lg-4">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

https://jsfiddle.net/t528eozd/

Answer 3

如果您检查自己的Bootstrap CSS版本，您会注意到您使用的是错误的类来进行偏移。 col-xx-offset-x是旧的偏移类。您的版本正在使用offset-xx-x（即offset-lg-4）。

另外，你只需要一个偏移 - 在包含四个Ham的div上。

Updated JSFiddle

<div class="col-xs-12 col-lg-4 offset-lg-4">Ham
    <br/>Ham
    <br/>Ham
    <br/>Ham
</div>

注意 - 我建议使用row类而不是clearfix多次更清晰地进行设置。

Here is a Demo

编辑/更新 - 一个技术上更正确的版本，使用行并将菜单分成自己的col-lg-4，将Foo，Bar，Ham和Jam分隔为col-lg-8包含两行。它还消除了对偏移的需要。

Here it is

bootstrap - 转到下一列

3 个答案: