Bootstrap表溢出

Question

我有两张桌子并排。我有自举网格系统，能够使表格变得动态，看起来很漂亮。我的问题是当我动态添加一个冗长的字符串时，表格中的文本溢出会将表格推送到第二个表格中。所以它不是很敏感。当我没有超过某个字符数时，它似乎很有效。这是bootstrap表格的规则吗？

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
    <div class="col-sm-6">
    <h2 class="sub-header">TITLE</h2>
      <div class="table-responsive">
            <table class="table table-striped ">
              <thead>
                <tr>
                  <th class="col-md-1">Subject</th>
                  <th class="col-md-2">Comments</th>
                  <th class="col-md-3">Owner</th>
                  <th class="col-md-3">Really Long Header that will case the table to overflow</th>
                  <th class="col-md-3">Date Activity Logged</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001111111111111111111111111111</td>
                </tr>
              </tbody>
            </table>
          </div>
    </div>
    <div class="col-sm-6">
          <h2 class="sub-header">Title Two For Table Two</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>
    </div>
    </div>    
    </div>

Answer 1

我刚刚意识到td's有一个列大小。从表中的"col-md-2"中删除td后，引导程序就响应了。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container">
  <div class="col-sm-6">
    <h2 class="sub-header">TITLE</h2>
    <div class="table-responsive">
      <table class="table table-striped ">
        <thead>
          <tr>
            <th>Subject</th>
            <th>Comments</th>
            <th>Owner</th>
            <th>Really Long Header</th>
            <th>Date Activity Logged</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <div class="col-sm-6">
    <h2 class="sub-header">Title Two For Table Two</h2>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Comment</th>
            <th>Created By</th>
            <th>Case/Merchant Number</th>
            <th>Created Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;