html - Bootstrap navs，如何固定内容高度

使用媒体查询将高度设置为选项卡内容内部模式

body {margin:2rem;}

.box-section {
  margin-top:10px;
  margin-bottom:10px;
  padding: 5px;
  border-style: solid;
  border-radius: 5px;
  border-color: lightgray;
  border-width:1px;
  //box-shadow: 0 0 0 1px lightgray;
  overflow: auto;
}

.nav-vertical {}

.nav-vertical .nav-item {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-vertical .nav-link {
    //padding: .5rem 3rem;
    color: darkgray !important;
    font-weight: bold;
}

.nav-vertical .nav-link.active {
    color: black !important;
    //border-bottom: #5A6268 2px solid !important;
    background-color: lightgray !important;
    /*-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;*/
}



/* For Default height */
@media only screen and (min-width: 768px) {
  #basicModal #myTabContent{
    height:300px;
  }
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>

<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">

<!-- Edit info -->
<div class="container">

  <!-- Vertical navs -->
  <div class="row">
    <div class="col-md-2 mb-3">
      <ul class="nav-vertical nav nav-pills flex-column" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="home" aria-selected="true">Edit profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#account" role="tab" aria-controls="profile" aria-selected="false">Account settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#password" role="tab" aria-controls="contact" aria-selected="false">Password</a>
        </li>
      </ul>
    </div>

    <!-- Pages -->
    <div class="col-md-10">
      <div class="tab-content" id="myTabContent">

        <!-- Page : Edit profile -->
        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="home-tab">

          <div class="row">
            <div class="col-md-6 mb-3">
              <label>First name</label>
              <div class="input-group">
                <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Firstname" aria-label="" aria-describedby="basic-addon1" />
              </div>
              <ValidationMessage For="@(() => Model.OldPassword)" />
            </div>
            <div class="col-md-6 mb-3">
              <label>Last name</label>
              <div class="input-group">
                <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Lastname" aria-label="" aria-describedby="basic-addon1" />
              </div>
              <ValidationMessage For="@(() => Model.OldPassword)" />
            </div>
          </div>

          <br />
          <label>About you</label>
          <div class="input-group">
            <textarea @bind-Value="Model.NewPassword" class="form-control" placeholder="Tell us something about you!" aria-label="" aria-describedby="basic-addon1" ></textarea>
          </div>
          <ValidationMessage For="@(() => Model.NewPassword)" />
          <br />

        </div>

        <!-- Page : Account -->
        <div class="tab-pane fade" id="account" role="tabpanel" aria-labelledby="profile-tab">

          <label>User name</label>
          <div class="input-group">
            <InputText @bind-Value="Model.UserName" class="form-control" placeholder="User name" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.UserName)" />
          <br />
          <label>Email</label>
          <div class="input-group">
            <InputText @bind-Value="Model.Email" class="form-control" placeholder="Email" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.Email)" />
          <br />
          <div class="box-section bg-light">
            <h3>Delete Account</h3>
            Delete your account and all the associated information.&nbsp;<button style="float: right" class="btn btn-danger">Delete Account</button>
          </div>

        </div>

        <!-- Page : Password -->
        <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="contact-tab">

          <label>Old password</label>
          <div class="input-group">
            <InputText @bind-Value="Model.OldPassword" class="form-control" placeholder="Old password" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.OldPassword)" />
          <br />
          <label>New password</label>
          <div class="input-group">
            <InputText @bind-Value="Model.NewPassword" class="form-control" placeholder="New password" aria-label="" aria-describedby="basic-addon1" />
          </div>
          <ValidationMessage For="@(() => Model.NewPassword)" />
          <br />
          <button class="btn btn-danger">Change password</button>
          <br/><br/>

        </div>

      </div>
    </div>
    <!-- /.col-md-8 -->
  </div>

</div>
<!-- Edit info -->
        
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
        
        </div>
    </div>
  </div>
</div>

https://codepen.io/Hahkarthick/pen/mdeazXB

html - Bootstrap navs，如何固定内容高度

问题描述

解决方案

推荐阅读