Question

我使用Bootstrap 3网格根据用户是否使用额外的小设备来隐藏/显示导航栏内容。

我正在使用.hidden-xs和.visible-xs类。这些类适当地隐藏/显示内容，但我遇到了两个问题：

（1）隐藏内容也会使列间距缩小.col-xs-5，因为div是隐藏的。我尝试将.visible-xs添加到后续div中，并使用.col-xs-5来构成空白区域。这有效，但前提是我将内容放在div中。我只想让列间隔开来。

（2）在XS视图大小上，导航栏上的最后一项＆＃34;导航＆＃34;跳到下一行。我只占了12列。

见JSFiddle。我试着亲眼目睹＆＃34;欢迎＆＃34;在大视图上并且在XS视图上不显示任何内容。

Answer 1

我这是一个想法，你可以尝试而不是添加内容。这个CSS技巧使用：在CSS伪类之前和之后。

.no_content {
  display: block;
  content: "";
  width: 151px;
  height: 35px;
  background: transparent url(tape.png) 0 0 no-repeat;
}

<div class="no_content"></div>

Answer 2

我会进一步研究网格系统。我相信有一个偏移可以用来抵消这样的div：

./boinccmd --get_tasks | awk -F '[):]' '
   /^[0-9])/        { tasks++; thisTask=$1; p=1 }
   /fraction/       { pctdone=$2*100; if(pctdone<0.001)p=0 }
   /remaining/ && p { hrs=int($2/3600); mins=int(($2-(hrs*3600))/60)
                      printf "#%d\t%2.1f\t%d:%02d\n",thisTask,pctdone,hrs,mins}
   END{printf "%d task(s)\n",tasks}'

Answer 3

使用export class WelcomeComponent implements OnInit { hEW = true; hEU= false; hEL = false; constructor() { } ngOnInit() { } } bootstrap类，而不是尝试在空格中填充空div。

完全删除您在第（1）项中添加的div以“弥补空间”。在包含“Nav”的div上，将类设置为pull-right。因此，您JSFiddle的代码变为：

pull-right col-xs-1

Bootstrap 3 Grid - 隐藏/显示列

3 个答案: