时间戳

首页 > 解决方案 > HTML 引导网格

html - HTML 引导网格

问题描述

<div class="container">    
  <div class="row content">
    <div class="col-sm-1 sidenav" style="background-color:blue">
    </div>

    <div class="col-sm-2" style="background-color:orange">

    <div align="center" style="background-color:pink">
    <img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
    <h3>JOHN</h3>
    </div>

    <div class="navbar-default" role="navigation" style="background-color:purple">
        <ul class="nav" id="side-menu">
        <li><a href="">Profile</a></li>
        <li><a href="">Published</a></li>
        <li><a href="">Bookmarked</a></li>
        </ul>
    </div>

    </div>

    <div class="col-sm-8" style="background-color:yellow">
    <h3>Personal Information</h3>
    <table id="personal-information" class="table" align="left">
    <tbody>
    <tr>
    <td>Joined:</td>
    <td>2018-02-10</td>
    </tr>
    <tr>
    <td>Last Active:</td>
    <td>2019-10-15 12:15:17</td>
    </tr>
    <tr>
    <td>Gender:</td>
    <td>MALE</td>
    </tr>
    <tr>
    <td>Age:</td>
    <td>26</td>
    </tr>
    <tr>
    <td>About me:</td>
    <td></td>
    </tr>
    </tbody>
    </table>
    </div>

  </div>        

<div class="col-sm-1 sidenav" style="background-color:blue" >
</div>

</div>

</body>

看法

我尽可能地清理它。我还为每个 div 添加了颜色，这样一目了然。

我将我的页面分成 4 个。其中 2 个称为 sidenavs，用于在两侧创建空间以居中查看我的主要内容，1 个用于用户图像、名称和导航按钮，另一个用于其他内容，例如个人信息和将可能会添加更多。所以我将它们分别划分：1 - 2 -8 - 1

我的问题是，我不了解列的当前对齐方式，正如您从图像中看到的那样，应该位于右边缘的侧导航蓝色现在位于底部。我确保我所有的列大小加起来为 12，这是最大值，所以我不知道为什么另一个 div 被推到下一行。

PS所有那些奇怪的html名称，例如sidenav，即使它不是侧面的导航栏。以及已经 div 容器的行内容。我从免费的引导模板复制粘贴的整个 html 页面代码（如果你下载了其中一些，你实际上可以看到相似之处 - 我不擅长决定如何设计我的页面，所以我只是决定从模板中挑选并调整它我想要）

标签： htmltwitter-bootstrap

解决方案

这是它的本意吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <div class="row content">
    <div class="col-sm-1 sidenav" style="background-color:blue">
    </div>

    <div class="col-sm-2" style="background-color:orange">

      <div align="center" style="background-color:pink">
        <img class="img-circle" src="http://placehold.it/100x100" style="padding-top:10px;">
        <h3>JOHN</h3>
      </div>

      <div class="navbar-default" role="navigation" style="background-color:purple">
        <ul class="nav" id="side-menu">
          <li><a href="">Profile</a></li>
          <li><a href="">Published</a></li>
          <li><a href="">Bookmarked</a></li>
        </ul>
      </div>

    </div>

    <div class="col-sm-8" style="background-color:yellow">
      <h3>Personal Information</h3>
      <table id="personal-information" class="table" align="left">
        <tbody>
          <tr>
            <td>Joined:</td>
            <td>2018-02-10</td>
          </tr>
          <tr>
            <td>Last Active:</td>
            <td>2019-10-15 12:15:17</td>
          </tr>
          <tr>
            <td>Gender:</td>
            <td>MALE</td>
          </tr>
          <tr>
            <td>Age:</td>
            <td>26</td>
          </tr>
          <tr>
            <td>About me:</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-sm-1 sidenav" style="background-color:blue">
    </div>
  </div>


</div>

如果是这样，你有

<div class="col-sm-1 sidenav" style="background-color:blue"></div>

在外面

 <div class="row content"></div>

见这里：JSFiddle

推荐阅读