窗口缩小时引导容器内容不居中答案

【问题标题】：Bootstrap container content does not center when window is shrunk窗口缩小时引导容器内容不居中
【发布时间】：2021-07-13 22:23:57
【问题描述】：

我正在为 ASP.NET 网站开发一个 BootStrap 包装器，该包装器几乎可以与我在其中使用的所有内容一起使用——唯一的例外是主面板中的内容不居中在缩小浏览器窗口的宽度时正确，尽管页眉和页脚完全响应。

我有一个解决这个问题的方法：https://dotnetfiddle.net/6dmcaX。

请注意此包装器应用于母版页，而不是直接应用于我正在测试的页面。

对于标题，我使用具有以下类属性的 div：d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top。里面是一个UpdatePanel 和ContentTemplate，包含一堆用于BootStrap 的标记navbar。

同时，这里是主内容面板的标记：

<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
    <div id="content" class="row" style="margin-left: auto; margin-right: auto;">
        <div id="divContMain" runat="server" style="width: auto;">
            <asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <center>
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    …
    </div>
</div>

容器divContMain 需要在服务器上运行，因为在主要内容下方是一个侧边栏，可能需要也可能不需要，具体取决于被调用的页面。默认情况下，divContMain 的类是 col-12。我试图解决这个问题的一件事是我将主容器更改为container-fluid，并将divContMain的宽度更改为继承而不是“自动”——虽然这样做更好地将内容保持在中心，一旦窗口变得足够小，它最终会停止工作。

我非常接近解决这个问题，但我想问问有没有其他人知道。任何帮助将不胜感激！

【问题讨论】：

要将Purchasing Requisitions 文本居中吗？
@StepUp 我希望它在其容器中居中，是的。

标签： css asp.net twitter-bootstrap flexbox

【解决方案1】：

当使用display: flex 时，可以使用the Bootstrap classes 的组合来证明内容：

d-flex justify-content-center

所以你可以为h1添加新的css类：

#MainContent_ctl00 > h1 {
  text-align: center;
}

并为包含您的表格的div 添加d-flex justify-content-center 样式：

<div class="container d-flex justify-content-center" style="overflow-x: visible;">
    <table class="datatable datatable-striped" 
       id="MainContent_dgReqs" style="border-collapse:collapse;"
       border="1" rules="all" cellspacing="0" cellpadding="5">
        <!-- The other code is omitted for the brevity -->
    </table>
</div>

另外，文字可以通过text-align: center在<h1>里面对齐。

一个例子：

.tableint {
  font-size: 15px;
  font-family: Estrangelo Edessa, Verdana;
  border: Solid 1px #666666;
  border-collapse: collapse;
  color: Black;
}

.thint {
  background-color: #EE8322;
  color: Black;
  font-weight: bold;
  font-size: 14px;
  border: solid 1px #666666;
  border-collapse: separate;
  font-variant: small-caps;
  margin-bottom: 5px;
}

.textboxint {
  background-repeat: repeat-x;
  border: 1px solid #d1c7ac;
  font-size: 14px;
  border-style: inset;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-family: Estrangelo Edessa, Verdana;
  color: Black;
  width: 175px;
}

.dropdownint {
  background-repeat: repeat-x;
  border: 1px solid #d1c7ac;
  font-size: 12px;
  border-style: inset;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-family: Estrangelo Edessa, Verdana;
  color: Black;
  width: 175px;
}

.buttonint {
  margin: 5px;
  font-family: Estrangelo Edessa, Verdana;
  font-size: 14px;
  background-color: #EE8322;
  color: Black;
  text-align: center;
  border-top-style: groove;
  border-left-style: groove;
  border-right-color: Black;
  border-bottom-color: Black;
  height: 22px;
}

.buttonint:hover {
  font-family: Estrangelo Edessa, Verdana;
  font-size: 14px;
  background-color: #FFFFCC;
  color: #006699;
  margin: 5px;
}

#MainContent_ctl00 > h1 {
  text-align: center;
}

<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
    <div class="row justify-content-center" id="content"
      style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
      <!-- <div id="divContMain" style="width: inherit;">may just remove -->
      <div id="contentUPanel">
        <div id="MainContent_ctl00">
          <br>
          <h1>Purchasing Requisitions</h1>
          <br>
          <div>
            <table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
              <tbody>
                <tr>
                  <td align="center" class="thint" colspan="2">Filter</td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Request Start:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text">
                  </td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Request End:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text">
                  </td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Part Number:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Account:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Vendor No:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Vendor Name:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="center" colspan="2">
                    <input class="buttonint" type="submit" value="Search">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br>
          <div class="container d-flex justify-content-center" style="overflow-x: visible;">
            <table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
              border="1" rules="all" cellspacing="0" cellpadding="5">
              <tbody>
                <tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
                  <td>Row1</td>
                  <td>Row2</td>
                  <td>Row3</td>
                </tr>
                <tr align="center" class="gridview">
                  <td>Data1</td>
                  <td>Data2</td>
                  <td>Data3</td>
                </tr>
                <tr align="center" class="gridview" style="background-color:#FFE1CD;">
                  <td>Data1</td>
                  <td>Data2</td>
                  <td>Data3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src=" index.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
  </script>

更新：

我看到你编辑了你的小提琴。所以项目是对齐的，但是我们需要对齐上面的div容器。所以要做到这一点，需要添加以下样式：

<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">

   <!-- The other code is omitted for the brevity -->
</div>

【讨论】：

除了CSS 区域中的#MainContent 标记之外，我不知道这里有什么不同，即使那样也无济于事。请不要一次把一堆文字放在这里。
非常感谢您的帮助！！在内容合理后，我能够找出究竟该做什么:)

【解决方案2】：

在StepUp 的帮助下，我能够找出到底出了什么问题。主要的container 需要将其位置设置为absolute，容器下方的内容组需要将其内容对齐到中心，如下所示：

<div class="container-fluid mt-5" style="position: absolute;">
    <div id="content" class="row" style="display: flex; justify-content: center;">
        …
    </div>
</div>

现在一切都缩放并正确居中！

【讨论】：