0

当网站达到-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/

4

3 回答 3

0

将 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/

于 2016-04-20T13:55:21.117 回答
0

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

此外，您只需要一个偏移量 - 在包含四个火腿的 div 上。

更新了 JSFiddle

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

注意- 我建议使用一种更简洁的方法来设置它，row多次使用该类而不是 clearfix。

这是一个演示

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

这里是

于 2016-04-20T13:55:36.220 回答
0

添加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>

于 2016-04-20T13:45:59.540 回答