Flask 引导/烧瓶格式化问题

我利用引导框架构建了一个基于flask的网站。这一选择的灵感来自Corey Schafer的YouTube系列。我遇到的困难源于我希望拥有与用户共享的广泛的数据表，同时尊重Bootstrap为支持各种设备模板所带来的价值

然而，正如您将看到的，我不太确定“要拉什么杠杆”来实现我的目标。例如，我的桌面可以容纳更大范围的桌子视图，但一些东西限制了这个维度，右边的空房地产就是明证

当我尝试缩小字体大小时，ipad版本中的表格也适用，但必须有更好的方法使所有文本按比例缩放

最后是iphone。幸运的是，这似乎是工作得最好的版本，因为我可以根据需要最容易地在设备上缩放/修改（滚动表给人一种非常“受控”的感觉）

以下是我的css代码：

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
  max-width: 105%;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 2px 5px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

.table-condensed{
  font-size: 8px;
}

以下是与显示内容相关的html代码：

<div class="content-section">
    <form method="POST" action="" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <div class="btn-group-vertical" onclick="loading();">
                    {{ form.submit_autopull(class="btn btn-outline-primary") }}
                    {{ form.submit_autobren(class="btn btn-outline-primary") }}
                    {{ form.submit_autotang(class="btn btn-outline-primary") }}
                </div>
                <h6> </h6>
                <h6>This process can take 5 minutes for a large clan to compile and score games.</h6>
                <h6> </h6>

        </fieldset>
        {% if dataToShow == 1 %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend2 }}</legend>
            <div class="table-responsive table-condensed">
                 <table class="table">{{ form.clanStats | safe }}</table>
            </div>
        </fieldset>
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend3 }}</legend>
            <div class="media-body row flex-row flex-nowrap">
                <p class="article-content">{{ form.quartStats | safe }}</p>
            </div>
        </fieldset>

        <h6>Note: Results shown only for ladder games and experience levels 12 or greater.</h6>
        {% endif %}
    </form>
</div>

{{form.hidden_tag（）}}
{{图例}}
{{form.submit_autopull（class=“btn btn outline primary”）}
{{form.submit_autobren（class=“btn btn outline primary”）}
{{form.submit_autotang（class=“btn btn outline primary”）}
这个过程可能需要5分钟，一个大的氏族编译和得分游戏。
{%if dataToShow==1%}
{{legend2}}
{form.clanStats | safe}
{{legend3}}
{{form.quartStats | safe}
注：显示的结果仅适用于阶梯游戏和12级或更高级别的体验。
{%endif%}

非常感谢任何能帮助我理解组件之间交互的帮助