Question

我需要一个像图中这样的简单模式：

这是一次尝试：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>

Answer 1

没有网格/ colmuns定向的bootstrap没有太大意义。您可以为内部元素“用户框”设置固定宽度。

试试此代码

<!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>

Bootstrap 3/4，容器 - 容器中的容器或没有柱的行。图形示例

1 个答案: