Question

我所有的其他桌子似乎占据了窗户的整个宽度，正如我所希望的那样，我无法弄清楚为什么这个不是。 html似乎与其他表相同。我认为错误发生在元素内，但在查看它时似乎正确设置。下面的代码是屏幕截图中页面上第一个表的代码。 Screenshot of table

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-primary">
  </nav>
  <div class="container">
    <div class="row">
      <ul class="nav nav-tabs nav-justified" id="auth-tabs" role="tablist">
          <li class="nav-item"><a href="#users" id="active" class="nav-link  users" role="tab" aria-controls="users" aria-selected="True" data-toggle="tab">
          Users</a></li>
          <li class="nav-item"><a href="#groups" id="" class="nav-link groups" role="tab" aria-controls="groups" aria-selected="false" data-toggle="tab">
          Groups</a></li>
          <li class="nav-item"><a href="#scopes" id="" class="nav-link  scopes" role="tab" aria-controls="scopes" aria-selected="False" data-toggle="tab">
          Scopes</a></li>
          <li class="nav-item"><a href="#navigation" id="" class="nav-link navigation active" role="tab" aria-controls="navigation" aria-selected="true" data-toggle="tab">
          Navigation</a></li>
          <li class="nav-item"><a href="#pages" id="" class="nav-link  pages" role="tab" aria-controls="pages" aria-selected="False" data-toggle="tab">
          Pages</a></li>
          <li class="nav-item"><a href="#permissions" id="" class="nav-link  permissions" role="tab" aria-controls="permissions" aria-selected="False" data-toggle="tab">
          Permissions</a></li>
        </ul>
      </div>
      <div class="tab-content" id="auth-tabs">
        <div id="users" class="tab-pane fade" role="tabpanel" aria-labeledby="users">
          <div class='row'>
            <div class="col-md-12">
                <h4>Authentication
                    <small>Navbar</small>
                    <button class="btn btn-sm btn-primary pull-right" onclick="app.auth.navigation.new_nav()">
                        <i class="fa fa-plus">
                        </i>
                        Add to Navbar
                    </button>
                </h4>
                <hr>
                <div class="row">
                    <table class="table Navbar" id="navbar-table" width="100%">
                       <thead>
                          <tr>
                            <th></th>
                            <th>Id</th>
                            <th>Page id</th>
                            <th>Name</th>
                            <th>Icon</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr id="Navbar-7">
                            <td><button class="btn btn-link table-btn" onclick="app.auth.navigation.form({&quot;primary_key&quot;: 7})">
                                Edit
                                </button><button class="btn btn-link table-btn" onclick="app.auth.navigation.confirm_delete({&quot;name&quot;: &quot;srjys&quot;, &quot;primary_key&quot;: 7})">
                                Delete
                                </button>
                            </td>
                            <td>7</td>
                            <td>8</td>
                            <td>srjys</td>
                            <td>il;t7;t</td>
                          </tr>
                          <tr id="Navbar-2">
                            <td><button class="btn btn-link table-btn" onclick="app.auth.navigation.form({&quot;primary_key&quot;: 2})">
                                Edit
                                </button><button class="btn btn-link table-btn" onclick="app.auth.navigation.confirm_delete({&quot;name&quot;: &quot;Jtyed&quot;, &quot;primary_key&quot;: 2})">
                                Delete
                                </button>
                              </td>
                              <td>2</td>
                              <td>8</td>
                              <td>Jtyed</td>
                              <td>agrfds</td>
                            </tr>
                          </tbody>
                      </table>
                  </div>
                </div>
            </div>
        </div>
      </div>
  </div>
</body>


body {
  background-color: #F5F5F5;
}

.account-wall {
    margin-top: 75px;
    padding: 20px 20px 20px 20px;
        padding-top: 20px;
    background-color: #fff;
    -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-signin {
  max-width: 330px;
  padding: 0;
}

.buttons {
  padding-top: 10px;
}

.form-group {
  margin-bottom: 0;
}

.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 14px;
}

.small-link {
  font-size: 14;
}

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

.bounds-label {
  padding-right: 0;
}

.bounds {
  padding-left: 0;
  padding-right: 0;
}

.table-btn {
  padding-top: 0px;
  padding-bottom: 0px;
}

Answer 1

问题是我为我的表提供了一个用于js参考目的的“Navbar”类，但这也是bootstrap类的名称。

Html表不占用窗口的全宽

1 个答案: