在 Angular 2 应用程序中创建模板

Question

我正在尝试在 angular 2 中实现一个简单的应用程序。

我用顶部导航栏和侧导航栏设计了我的主页。

下面是我的主页模板的代码

home.component.html

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Status At A Glance</li>
        <li class="active"><a href="#">Remaining</a></li>
        <li><a href="#">In Progress</a></li>
        <li><a href="#">Accepted</a></li>
     </ul>
</div>  

<p> <strong> Welcome to eSpace Home </strong></p>
<img src="/../../assets/i9.jpeg" class="img-rounded" alt="home" height="200" width="600">

下图是我的主页截图

如上图所示，我无法减小侧导航的宽度和我的内容，即“欢迎来到 espace 主页”，并且图像在我的侧导航下方对齐。

任何人都可以通过指导我如何减少侧面导航的宽度以及如何将我的内容在侧面导航栏的右侧对齐来帮助我解决这个问题。

Answer 1

您可能需要grid system。例如：

<div class="row">
   <div class="col-lg-4">
      Your nav bar
   </div>
   <div class="col-lg-8">
      Your content
   </div>
</div>