如何使Bootstrap表适合页面的可用空间

时间：2019-04-03 07:25:22

标签： 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-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>

app.component.css 

    .page-header{
    width:100%;
    height:100px;
    background-color: blue;
    color:white;
    margin-top:-4px;
    text-align:center;

}
.navbar-fixed-left {
  width: 180px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}

.navbar-fixed-left .navbar-nav > li {
  float: none;  /* Cancel default li float: left */
  width: 139px;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}
.right{
    align-content: right;
}


.fixed_footer {
    position: fixed;
    height: 60px;
    bottom: 0;
    width: 100%;
    /*background-color:#1B2631;*/
    background-color: #F39C12;
    text-align: center;
    color:white;
}

.fixed{
    margin-top: -21px;
}

.top{
    margin-top: -130px;
}

nav{
    color:white;
}

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>

student-attendence.component.css 

h1{
    text-align: center;
    margin-top: 40px;
}

.grid{
    margin:3px;
    min-height: 300px;
    background-color: silver;
    text-align: center;
    font-size:large;
}

.grid-striped .row:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

.row1{
    align-content: center;
    margin-left: 200px;
}

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项目。我已经创建了用于输入的表，但是表在侧面导航栏中被裁剪了。如何在桌子上放置可用空间。 请在下面找到链接 https://imagizer.imageshack.com/img924/6150/kuQNbe.png

1 个答案:

答案 0 :(得分：0)

像这样使用行列

<!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>
相关问题
最新问题