Bootstrap -如何防止列重叠

Question

我有一个表格和文本，它们是重叠的。如果我将列大小切换为lg，即“class=-xs-6”，则文本会在下面折叠。但是，我希望它们并排在一起，直到浏览器不允许，然后折叠。

代码非常简单：

<div class="row " style="background-color:#f5fcff; border-radius:15px; margin-left:25px; margin-top:35px">
        <div class="col-xs-6"  >
          <div style="padding-top:25px">
            This table contains a list of users and how many times they've looked at a product's page (user):
          </div>
            <table class="table table-hover" style="text-align:center">
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>14CBL13W</th>
                  <th>18VAEA35W</th>
                  <th>14CBL15Y</th>
                  <th>14DAEA12W</th>
                  <th>14OM6DY</th>
                  <th>...</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>234234</td>
                  <td>0</td>
                  <td>0</td>
                  <td>15</td>
                  <td>3</td>
                  <td>0</td>
                  <td>...</td>
                </tr>
                ...                  
              </tbody>
            </table>
          </div>
          <div class="col-xs-6" style="padding-left:35px; padding-top:75px" >
            In this example, a new user 96887, which has looked at '14DAEA12W'. The value of '14DAEA12W' has now changed from 0 to 1. Now, which item would recommend that the user might like? If you answered '14CBL15Y' then you are correct. This is because user data is showing that there is a high amount of correlation between the two. However, this may also be part of a feedback loop - the more the item is recommended, the higher the chance that its value in this chart goes up. This chart also overlooks any item characteristic similarities, it only looks at user behavior. 
          </div>
      </div>

​

​

Answer 1

EDIT1:如果您将div枚举为一个无序列表(如下所示)，Bootstrap看起来会很不错。如果你在jsfiddle.net中运行它，它看起来不会像你想要的那样。如果你不想让它重叠并留在同一行，可以通过缩短表或使列表水平运行来给它更多的空间。就目前而言，col xs-1可能看起来不错

<div class="row " style="background-color:#f5fcff; border-radius:15px; margin-left:25px; margin-top:35px">
    <ul style="list-style-type:none">
        <li>
        <div class="col-xs-6" >
          <div style="padding-top:25px">
            This table contains a list of users and how many times they've looked at a product's page (user):
          </div>
        </li>
          <li>
            <table class="table table-hover" style="text-align:center">
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>14CBL13W</th>
                  <th>18VAEA35W</th>
                  <th>14CBL15Y</th>
                  <th>14DAEA12W</th>
                  <th>14OM6DY</th>
                  <th>...</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>234234</td>
                  <td>0</td>
                  <td>0</td>
                  <td>15</td>
                  <td>3</td>
                  <td>0</td>
                  <td>...</td>
                </tr>
                ...                  
              </tbody>
            </table>
          </div>
        </li>
        <li>
          <div class="col-xs-6" style="padding-left:35px; padding-top:75px" >
            In this example, a new user 96887, which has looked at '14DAEA12W'. The value of '14DAEA12W' has now changed from 0 to 1. Now, which item would recommend that the user might like? If you answered '14CBL15Y' then you are correct. This is because user data is showing that there is a high amount of correlation between the two. However, this may also be part of a feedback loop - the more the item is recommended, the higher the chance that its value in this chart goes up. This chart also overlooks any item characteristic similarities, it only looks at user behavior. 
          </div>
        </li>
      </div>

    </ul

Answer 2

你错过了<div class="container"></div>，把你的区块放在一个里面。