Question

我是bootstrap和css的新手，我想设计这个输出：

为此目的写下：

 <div class="row">
        <div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
            <nav class="navbar navbar-default navbar-left">
                <div class="container">
                    behzad
                </div>
            </nav>
            <div class="col-md-1">

            </div>
        </div>
    </div>

但这不正确，我该如何解决？

Answer 1

Bootstrap应遵循模式：container - row - col。然后使用-xs（xsmall设备），-sm（小型设备），-md（中型设备），-lg（大型设备）根据设备更改网格设计。< / p>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
           <!-- Left panel, top panel on mobile device -->
        </div>
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
           <!-- Content -->
           <div class="row">
               <div class="col-xs-1">
                    <!-- First empty col (Also can use offset) -->
               </div>
               <div class="col-xs-1">

               </div>
               <div class="col-xs-1">

               </div>
                   .
                   .
                   .
               <div class="col-xs-1">
                    <!-- Last empty col (Also can use offset) -->
               </div>
           </div>
        </div>
    </div>
</div>

如果你想使用col-offset尝试这种方法：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
           <!-- Left panel, top panel on mobile device -->
        </div>
        <div class="col-xs-8 col-lg-offset-2">
            <!-- Content -->
            <div class="row">
                 <div class="col-xs-1">

                 </div>
                 <div class="col-xs-1">

                 </div>
                     .
                     .
                     .
            </div>
        </div>
    </div>
</div>

Offset使用.col-xs(sm, md, lg)-offset-*将列移到右侧。这些类通过*列增加列的左边距。在此示例中，.col-xs-offset-2将列移到两列上。

Answer 2

您没有正确使用引导程序。将您的col定义放在单独的div内：还可以使用bootstrap的xs和md定义。最后，将您的row放入容器中。

<div class="container">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9">
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
      <div class="col-xs-1"></div>
    </div>
  </div>
</div>

工作示例：https://jsfiddle.net/mspinks/zf0q5cLk/3/

我怎样才能解决我的引导网格？

2 个答案: