Bootstrap 3 / 4，容器流体或没有列的行中的容器。图形示例答案

【问题标题】：Bootstrap 3 / 4, container in container-fluid or row without columns. Graphic exampleBootstrap 3 / 4，容器流体或没有列的行中的容器。图形示例
【发布时间】：2016-12-19 18:04:12
【问题描述】：

我需要一个像这样的简单架构：

这是一个尝试：http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview 没有成功。

如何做到这一点？

我需要图片中的内容。没错。

在 xs 模式下，我禁用了很多东西。我的问题是在桌面模式下。

<div class="container-fluid" style="background:red">
      <div class="row">
        <div class="d-inline-block" style="background-color:blue">
          <div class="container">
            <nav class="navbar navbar-light" style="background:white">
              <a class="navbar-brand" href="#">Navbar</a>
              <ul class="nav navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
              </ul>
              <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="d-inline-block" style="background-color:yellow; float:right">
          <span class="d-inline-block" style="background:white; padding: 20px">User box</span>
        </div>
      </div>
    </div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 containers

【解决方案1】：

没有网格/列明方向的引导程序没有太大意义。您可以为内部元素“用户框”设置固定宽度。

试试这个代码

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0-alpha.3" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@4.0.0-alpha.3" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid" style="background:red">
      <div class="row">
        
          <div class="container">
            <div class="col-md-9 col-lg-9">
              <nav class="navbar navbar-light" style="background:white">
                <a class="navbar-brand" href="#">Navbar</a>
                <ul class="nav navbar-nav">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                </ul>
                <ul class="nav navbar-nav pull-xs-right">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="col-md-3 col-lg-3" style="background-color:yellow; float:right">
              <span class="d-inline-block" style="background:white; padding: 20px">User box</span>
            </div>
         </div>  
     </div>

  </body>

</html>

【讨论】：

亲爱的@Yuri Ramos，这不是我需要的。我需要从屏幕左侧（容器流体开始处）到第一列右侧（菜单结束处）的红色。比列可以是流动的（我也不能对第一列使用“容器”类）并且第二列必须是流动的（而不是 col-md-3），因为内容可能会因页面而异。我不能说 col-md-3 或 2 或 1 是否足够，而且我不想要那个框的右边距。现在更清楚了？
看看我的照片。我需要从左到右菜单的蓝色（有或没有“容器”能力）。在容器流体的右侧，我只需要绿色框的空间（当然还有小填充和边距）。