3 列网格导航栏引导程序

Posted 2023-03-05

【中文标题】3 列网格导航栏引导程序

【英文标题】：3 column grid navbar bootstrap

【发布时间】：2014-08-19 01:43:36

【问题描述】：

我正在尝试创建一个 3 列网格导航栏，我尝试使用引导程序中内置的列但没有成功。

第一列的最大宽度需要为 100 像素，但如果浏览器调整大小，则可以是流动的

第二列需要填补第一列和第二列之间的空白，并且在调整浏览器大小时也可以流畅地响应。

第三列的最大宽度需要为 200 像素，但如果重新调整浏览器大小，则可以是流动的

我无法让列彼此内联，这是我的小提琴：http://jsfiddle.net/Xsfvw/7/

<!--Bootstrap Approach-->
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-sm-3 border">Logo</div>
        <div class="col-xs-2 col-sm-6 border">Nav</div>
        <div class="col-xs-2 col-sm-3 border">Right</div>
    </div>
</div>
<!--Standard CSS Approach-->
<div class="container-fluid">
    <div class="row">
        <div class="nalogo">Logo</div>
        <div class="nanav">Nav</div>
        <div class="naright">right</div>
    </div>
</div>

CSS：

.border 
    border: 2px solid #ff0000;
    z-index: 1020;
    height: 50px;
    margin-bottom: 30px;

.nalogo 
    width:100px;
    height:50px;
    background-color:#ff0000;
    border: 1px solid #000;
    float: left;

.nanav 
    width:100%;
    height:50px;
    background-color:#00ff00;
    border: 1px solid #000;
    margin:0 auto !important;

.naright 
    display: inline-block;
    width:200px;
    height:50px;
    background-color:#0000ff;
    border: 1px solid #000;
    float: right;

这是我想要复制的内容：

【问题讨论】：

能否也包含不同断点的图像？

我已经更改了上面的图片以反映我想要实现的目标。

bootply.com/mQh8DyRfWY

【参考方案1】：

Bootstrap 支持根据屏幕宽度隐藏和显示网格图块。考虑使用visible-*-block 来解决您的问题。请考虑以下小提琴：

http://jsfiddle.net/Xsfvw/10/

它使用以下设计模式：

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-2 visible-xs-block border">Nav</div>
      <div class="col-xs-8 visible-xs-block border">Logo XS</div>
      <div class="col-xs-2 visible-xs-block border">Right</div>
      <div class="col-sm-3 visible-sm-block visible-md-block border">Logo SM</div>
      <div class="col-sm-6 visible-sm-block visible-md-block border">Nav </div>
      <div class="col-sm-3 visible-sm-block visible-md-block border">Right</div>
  </div>
</div>

【参考方案2】：

你好，大于 768px。 你可以使用this之类的东西。

.container-fluid 
    width: 100%;
    background: #222;

.row 
    width: 100%;

.row > div 
    color: #FFF;

.nalogo 
    float: left;
    width: 150px;
    background: red;

.nanav 

.naright 
    float: right;
    width: 200px;
    background: blue;

它使用简单的浮动来实现流体中心。 但是当在较小的屏幕上时，您需要在元素周围移动，所以最好有菜单，所以当屏幕小于 768 时，它会切换到另一个。