css - 如何使用 Bootstrap 固定标签的宽度

Question

我想根据 bootstrap 12 列来固定标签的宽度。如何使用不同设备的以下设置跨 12 列进行此操作。请帮忙

<div class="row">
    <div class="form-group">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div style="height: 30px; margin: 0; padding: 3">
                <table cellspacing="0" cellpadding="3" rules="all" border="1" id="tblHeader"
                    style="background-color: #336666; color: white; border-collapse: collapse; height: 100%;">
                    <tr>
                        <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                            <asp:Label ID="Label1" CssClass="control-label" runat="server" Text="ID"></asp:Label>
                        </td>
                        <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                            <asp:Label ID="Label2" CssClass="control-label" runat="server" Text="Employee Name"></asp:Label>
                        </td>
                        <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                            <asp:Label ID="Label3" CssClass="control-label" runat="server" Text="Company"></asp:Label>
                        </td>
                        <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                            <asp:Label ID="Label4" CssClass="control-label" runat="server" Text="Department"></asp:Label>
                        </td>
                        <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                            <asp:Label ID="Label5" CssClass="control-label" runat="server" Text="Designation"></asp:Label>
                        </td>
                        <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                            <asp:Label ID="Label6" CssClass="control-label" runat="server" Text="Active"></asp:Label>
                        </td>
                        <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                            <asp:Label ID="lblOption" CssClass="control-label" runat="server" Text="Option"></asp:Label>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

在bootstrap表中应该是 Bootstrap 宽度的第th个元素

      <div class="col-md-12 col-sm-12 col-xs-12">
          <div style="height: 30px; margin: 0; padding: 3">
              <table cellspacing="0" cellpadding="3" rules="all" border="1" id="tblHeader"
                  style="background-color: #336666; color: white; border-collapse: collapse; height: 100%;">
                  <tr>
                      <th class="col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                          your column title
                      </th>
                      <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                          your column title
                      </th>
                      <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                          your column title
                      </th>
                      <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                         your column title
                      </th>
                      <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                          your column title
                      </th>
                      <th class="col-md-1 col-sm-1 col-xs-1" style="text-align: center">
                          your column title
                      </th>
                      <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center">
                          your column title
                      </th>
                  </tr>

                  <tr>
                      <td >
                          <asp:Label ID="Label1" CssClass="control-label" runat="server" Text="ID"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="Label2" CssClass="control-label" runat="server" Text="Employee Name"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="Label3" CssClass="control-label" runat="server" Text="Company"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="Label4" CssClass="control-label" runat="server" Text="Department"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="Label5" CssClass="control-label" runat="server" Text="Designation"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="Label6" CssClass="control-label" runat="server" Text="Active"></asp:Label>
                      </td>
                      <td >
                          <asp:Label ID="lblOption" CssClass="control-label" runat="server" Text="Option"></asp:Label>
                      </td>
                  </tr>
              </table>
          </div>
      </div>