Angular 如何使引导表适合页面的可用空间_Angular_Bootstrap 4

Angular 如何使引导表适合页面的可用空间

angular bootstrap-4

Angular 如何使引导表适合页面的可用空间,angular,bootstrap-4,Angular,Bootstrap 4,app.component.html <html> <nav class="navbar navbar-expand-md"> <div class="container"> </div> <div class="mx-auto order-0"> <a class="navbar-brand mx-auto" href="#">GURUKULAM PRE-SCHO

app.component.html

<html>
    <nav class="navbar navbar-expand-md">
      <div class="container">
      </div>
      <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">GURUKULAM PRE-SCHOOL</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="aboutUs">aboutUs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="contactUs">contactUs</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="fixed">
      <div class="navbar navbar-inverse navbar-fixed-left">
        <div class="top">
          <ul class="nav navbar-nav">
            <li class="nav-item"> <a href="nav-link" routerLink="home">Home</a></li>
            <li class="nav-item"> <a href="nav-link" routerLink="aboutUs">AboutUs</a></li>
            <li class="nav-item"> <a href="nav-link" routerLink="contactUs">contactUs</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Home1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Page 1-1</a></li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
              </ul>
            </li>
            <li><a routerLink="studentsAttendence">Student Attendence</a></li>
            <li><a routerLink="staffAttendence">Staff Attendence</a></li>
            <li><a routerLink="MarksCard">Marks Cards</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
          </ul>
        </div>
      </div>
    </div>
    <router-outlet></router-outlet>
    <footer class="page-footer navbar-fixed-bottom">
      <div class="fixed_footer">@Copyright 2019</div>
    </footer>
    </html>

student-attendence.component.html

 <div class="container grid-striped">

    <div class="row font-weight-bold py-2">
        <div class="col"><div class="row1">Thing one</div></div>
        <div class="col"><div class="row1">Thing two</div></div>
        <div class="col"><div class="row1">Thing three</div></div>
    </div>

    <div class="row py-2">
        <div class="col"><div class="row1">Thing one</div></div>
        <div class="col"><div class="row1">Thing two</div></div>
        <div class="col"><div class="row1">Thing three</div></div>

    </div>
    <div class="row py-2">
        <div class="col"><div class="row1">Thing one</div></div>
        <div class="col"><div class="row1">Thing two</div></div>
        <div class="col"><div class="row1">Thing three</div></div>

    </div>
    <div class="row py-2">
       <div class="col"><div class="row1">Thing one</div></div>
        <div class="col"><div class="row1">Thing two</div></div>
        <div class="col"><div class="row1">Thing three</div></div>
   </div>
 </div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { ContactUsComponent } from './contact-us/contact-us.component';

import { NgBoostrapDropdownDirective } from './ng-boostrap-dropdown.directive';
import { StudentAttendenceComponent } from './student-attendence/student-attendence.component';
import { StaffAttendenceComponent } from './staff-attendence/staff-attendence.component';
import { MarksCardsComponent } from './marks-cards/marks-cards.component';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,
    ContactUsComponent,
    NgBoostrapDropdownDirective,
    StudentAttendenceComponent,
    StaffAttendenceComponent,
    MarksCardsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我正在使用bootstrap4进行angular6项目。我已经为条目创建了表格，但表格在侧导航栏中被裁剪。如何使桌子适合可用空间。请找到下面的链接

像这样使用行-列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
    />
    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"
    ></script>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"
    ></script>
    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"
    ></script>
</head>
<body>

    <div class="container-fluid">
    <nav class="navbar navbar-expand-lg border border-primary">
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">GURUKULAM PRE-SCHOOL</a>
        <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target=".dual-collapse2"
        >
        <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" routerLink="home"
            >Home <span class="sr-only">(current)</span></a
            >
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="aboutUs">aboutUs</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="contactUs">contactUs</a>
        </li>
        </ul>
    </div>
    </nav>


    <div class="row">
    <div class="col-3">
        <div class="fixed border border-primary">
        <div class="navbar navbar-inverse navbar-fixed-left">
            <div class="top">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                <a href="nav-link" routerLink="home">Home</a>
                </li>
                <li class="nav-item">
                <a href="nav-link" routerLink="aboutUs">AboutUs</a>
                </li>
                <li class="nav-item">
                <a href="nav-link" routerLink="contactUs">contactUs</a>
                </li>
                <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"
                    >Home1<span class="caret"></span
                ></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
                </li>
                <li>
                <a routerLink="studentsAttendence">Student Attendence</a>
                </li>
                <li><a routerLink="staffAttendence">Staff Attendence</a></li>
                <li><a routerLink="MarksCard">Marks Cards</a></li>
                <li>
                <a href="#"
                    ><span class="glyphicon glyphicon-log-out"></span> Logout</a
                >
                </li>
            </ul>
            </div>
        </div>
        </div>
    </div>

    <div class="col-9 border border-primary" style="">
        <div class="container grid-striped border border-primary">
        <div class="row font-weight-bold py-2 border border-primary">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>

        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        </div>
    </div>
    </div>

    <div class="row">
    <router-outlet></router-outlet>
    <footer class="page-footer navbar-fixed-bottom">
        <div class="fixed_footer">@Copyright 2019</div>
    </footer>
    </div>
</div>
</body>
</html>

分享你的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { ContactUsComponent } from './contact-us/contact-us.component';

import { NgBoostrapDropdownDirective } from './ng-boostrap-dropdown.directive';
import { StudentAttendenceComponent } from './student-attendence/student-attendence.component';
import { StaffAttendenceComponent } from './staff-attendence/staff-attendence.component';
import { MarksCardsComponent } from './marks-cards/marks-cards.component';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,
    ContactUsComponent,
    NgBoostrapDropdownDirective,
    StudentAttendenceComponent,
    StaffAttendenceComponent,
    MarksCardsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
    />
    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"
    ></script>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"
    ></script>
    <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"
    ></script>
</head>
<body>

    <div class="container-fluid">
    <nav class="navbar navbar-expand-lg border border-primary">
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">GURUKULAM PRE-SCHOOL</a>
        <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target=".dual-collapse2"
        >
        <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" routerLink="home"
            >Home <span class="sr-only">(current)</span></a
            >
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="aboutUs">aboutUs</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="contactUs">contactUs</a>
        </li>
        </ul>
    </div>
    </nav>


    <div class="row">
    <div class="col-3">
        <div class="fixed border border-primary">
        <div class="navbar navbar-inverse navbar-fixed-left">
            <div class="top">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                <a href="nav-link" routerLink="home">Home</a>
                </li>
                <li class="nav-item">
                <a href="nav-link" routerLink="aboutUs">AboutUs</a>
                </li>
                <li class="nav-item">
                <a href="nav-link" routerLink="contactUs">contactUs</a>
                </li>
                <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"
                    >Home1<span class="caret"></span
                ></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
                </li>
                <li>
                <a routerLink="studentsAttendence">Student Attendence</a>
                </li>
                <li><a routerLink="staffAttendence">Staff Attendence</a></li>
                <li><a routerLink="MarksCard">Marks Cards</a></li>
                <li>
                <a href="#"
                    ><span class="glyphicon glyphicon-log-out"></span> Logout</a
                >
                </li>
            </ul>
            </div>
        </div>
        </div>
    </div>

    <div class="col-9 border border-primary" style="">
        <div class="container grid-striped border border-primary">
        <div class="row font-weight-bold py-2 border border-primary">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>

        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        <div class="row py-2">
            <div class="col"><div class="row1">Thing one</div></div>
            <div class="col"><div class="row1">Thing two</div></div>
            <div class="col"><div class="row1">Thing three</div></div>
        </div>
        </div>
    </div>
    </div>

    <div class="row">
    <router-outlet></router-outlet>
    <footer class="page-footer navbar-fixed-bottom">
        <div class="fixed_footer">@Copyright 2019</div>
    </footer>
    </div>
</div>
</body>
</html>