在角度2应用程序中创建模板

时间:2017-12-21 09:44:42

标签: html5 angular bootstrap-4

我正在尝试在角度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">

下面显示的是我的主页的屏幕截图

enter image description here

如上图所示,我无法减小我的侧导航和我的内容的宽度,即“欢迎来到主页&#34;和图像在我的侧面导航下方对齐。

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

1 个答案:

答案 0 :(得分:1)

您可能需要grid system。例如:

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