<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Layout</title>
<style>
/********** Base styles **********/


    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:focus {
      background-color: rgb(206, 206, 206) !important;
    }

    .active a {
      background-color: rgb(66, 66, 66) !important;
      color: rgb(255, 255, 255) !important;
    }
    a {
        text-decoration: underline;
    }
    /* 调整导航链接的样式 */
    .nav-pills a {
      color: rgb(160, 160, 160);
      font-size: 16px;
      padding: 8px 10px;  /* 内边距调小 */
      text-decoration: none;
    }

    .nav-pills a:hover {
      background-color: rgb(66, 66, 66) !important;
      color: rgb(160, 160, 160) !important;
    }

    /* 使用 Flex 布局让导航项在一行显示，并减少间距 */
    .nav-pills {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    /* 调整每个导航项的间距 */
    .nav-item {
      margin: 0 5px;  /* 根据需要调小这个值 */
      text-align: center;
      margin-top: 5px;
    }

    ul.nav li.dropdown:hover > ul.dropdown-menu {
      display: block;
    }

    .dropdown-menu {
      width: 12vw !important;
      text-align: center;
    }

    .modal-lg {
      max-width: 80vw;
    }
    /* 让所有 <a> 标签默认带有下划线 */
    .maintext a {
        text-decoration: underline;
    }

    /* 如果需要在鼠标悬停时加深下划线样式 */
    .maintext a:hover {
        text-decoration: underline;
        color: blue; /* 可选：更明显的悬停颜色 */
    }

  </style>