HTML CSS 设计：带有 bootstrap-sidebar 的 Bootstrap UI-KIT

Question

我正在尝试设计一个我自己编写的简单 Django Web App。 但我绝对不知道如何按照我的意愿设计它。如果您尝试放入一个简单的图像，HTML 和 CSS 就像 Word 一样，这会破坏您整个 Word 文件的布局和设计。我完全不明白...

我正在使用这个 HTML 模板：https://colorlib.com/wp/template/tools-ui-kit/

演示：https://colorlib.com/preview/theme/tools/

我正在使用这个侧边栏：https://bootstrapious.com/p/bootstrap-sidebar#further-improvements

我已经绘制了一个屏幕截图，这样您就可以看到我想要归档的内容以及当前的行为：

无论前面是否有按钮，我都想使表格居中。无论侧边栏是否折叠，我都想要左右相同的填充。 红色显示实际值，绿色显示我想使用但动态的值。

<script> 部分和包含所有脚本和 CSS 文件的 <link> 部分包含在 base_generic.html 中，它是所有其他 html 文件的一部分。

这是我的 CSS 文件：

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #DDDDDD;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #DDDDDD;
}

 #sidebarCollapse {
    /*width: 40px;*/
    height: 40px;
    /*display: block;*/
    /*position: absolute;*/
    /*margin-left: 400px;*/
    background: #f5f5f5;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 5px auto;
}

.wrapper {
    display: flex;
    align-items: stretch;
    perspective: 1500px;
}

#sidebar {
    min-width: 400px;
    max-width: 400px;
    background: #343A40;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
}

#sidebar.active {
    margin-left: -400px;
    transform: rotateY(100deg); /* Rotate sidebar vertically by 100 degrees. */
}

最后这是我的 HTML 文件：

{% extends "base_generic.html " %}

{% block content %}
<div class="main-section">
  <section class="ftco-section pb-md-3 bg-dark">
  </section>

  <div class="wrapper" id="carousel">
    <nav class="active" id="sidebar">
      <div class="sidebar-header">
        <h1 class="heading-section mb-4 pb-md-3">SIP-Benutzer</h1>
      </div>

      <h4 class="heading-section mb-4 pb-md-3">Was ist ein SIP-Benutzer?</h4>
      <p>
        Mit einem SIP-Benutzer loggen Sie sich auf Ihrem Telefon Endgerät oder in der Telba Cloud App ein.
        Der SIP-Benutzer enthält den Nutzernamen das Passwort die Nebenstelle und die Nummer die nach außen hin
        signalisiert wird sowie der angezeigte Name für interne Anrufe.
        Sie müssen zunächst ihre SIP-Nutzer eintragen. Anschließend können Sie über die Tabellen "Funktionen" oder.
        "Routen" einstellen, wie dieser SIP Nutzer behandelt werden soll.
        Soll der SIP-Nutzer zum Beispiel eine Fax2Mail Adresse darstellen muss man nach dem Eintragen des SIP-Nutzers
        zur Funktiostabelle wechseln und entsprechend Fax2Mail für die Durchwahl des SIP-Nutzers erstellen.
      </p>
    </nav>
    <button class="btn btn-outline-info" id="sidebarCollapse" type="button">
      <!--      <i class="ion-ios-more"></i> Was ist ein SIP-Benutzer?-->
      <i class="ion-ios-more"></i> Hilfe
    </button>

    <div class="container-table">
      <section>
        <h1 class="text-center">SIP-Benutzer</h1>
        {% if sipuser_list %}
        <table class="table table-hover">
          <thead>
          <tr>
            <th scope="col">CallerID</th>
            <th scope="col">Name</th>
            <th scope="col">Nebenstelle</th>
            <th scope="col">Externe Anzeigenummer</th>
            <th scope="col">Sip-User</th>
            <th scope="col">Sip-Password</th>
            <th scope="col">Aktionen</th>
          </tr>
          </thead>
          <tbody>
          {% for sipuser in sipuser_list %}
          <tr>
            <th scope="row">{{ sipuser.CALLERID }}</th>
            <th>{{ sipuser.NAME }}</th>
            <th>{{ sipuser.NST }}</th>
            <th>{{ sipuser.EXTSIGNALNUMBER }}</th>
            <th>{{ sipuser.SIPUSER }}</th>
            <th>{{ sipuser.SIPPASSWD }}</th>
            <th><a href="{{ sipuser.get_absolute_url }}">View</a> -
              <a href="{% url 'sipuser-update' sipuser.pk %}">Update</a> -
              <a href="{% url 'sipuser-delete' sipuser.pk %}">Delete</a>
            </th>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        <!--                <p class="col-md-4 blockquote">-->
        <!--                  Test TestTest TestTestTest TestTestTestTest TestTestTestTestTestTest TestTestTestTestTestTest-->
        <!--                  TestTestTestTestTestTestTest TestTestTestTestTestTestTestTestTest-->
        <!--                  TestTestTestTestTestTestTestTestTestTest-->
        <!--                </p>-->
        {% else %}
        <p class="text-center">There are no contexts in the library.</p>
        {% endif %}
        {% endblock %}
      </section>
    </div>
  </div>
</div>

Answer 1

我想通了。
我只需要像这样为每个子站点创建一些新的 CSS 表格类来使所有表格居中：

.container-table-sipuser {
  margin: auto;
  width: 100%;
  height: calc(100vh - 72px);
  padding-right: 80px;
  max-width: 1260px;
}

.container-table-context-sipuser {
  margin: auto;
  width: 100%;
  height: calc(100vh - 72px);
  max-width: 1180px;
}

.container-table-functions {
  margin: auto;
  width: 100%;
  height: calc(100vh - 72px);
  padding-right: 80px;
  max-width: 695px;
}

.container-table-routen {
  margin: auto;
  width: 100%;
  height: calc(100vh - 72px);
  padding-right: 80px;
  max-width: 795px;
}

.container-table-context {
  margin: auto;
  width: 100%;
  height: calc(100vh - 72px);
  padding-right: 80px;
  max-width: 1505px;
}

我决定暂时保留其余部分。也许我稍后会尝试再次更改它。