Bootstrap表折叠

Question

我正在使用这段代码，这是一张桌子，它的问题是当它达到1024（iPad专业宽度）的宽度时，它正在折叠（包裹下）。如何解决此问题，以便表格保持不变直至达到移动版本？

我知道表格没有响应但是我在其他页面上使用的引导程序，其中我有2个div，一个有行和col-xs-12。在该页面上，表格不会崩溃（换行）但我不相信它是因为行或col-xs-12类。有什么想法吗？

这是表格的代码：

  <div class="row totalCart">
    <table class="footable table toggle-arrow-tiny" data-page-size="7" data-filter=#filter>
      <thead>
        <tr>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 100px;">FILE</th>
          <th class="TabletView col-xs-2 col-md-1" style="min-width: 100px;">PROCESS</th>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 100px;">SPECIFICATION</th>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 250px;"></th>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 100px;">PRICE/UNIT</th>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 120px;">TOTAL PRICE</th>
          <th class="col-xs-2 col-ms-1 col-md-1" style="min-width: 50px;"></th>
        </tr>
      </thead>
      <tbody style="background-color: #fff;">
        <tr>
          <td class="orderLink"><div class="pictureBoxFile"></div><label style="font-size: 10px;">filename.stl</label></td>
          <td class="TabletView orderLink"><p>3D Printing</p></td>
          <td style="font-size: 12px;" class="orderLink"><p>Material:PLA<br>Colour:Black<br>Filling:Light<br>Quality:Low<br>Post Processing:Sanding</p></td>
          <td class="orderLink">
            <div style="display:flex;">
              <div><p>Quantity:</p></div>
              <div><select style="height:100%; margin-left: 35px!important;" class="form-control"><option>1</option></select></div>
            </div>
            <div style="display:flex;">
              <div><p>Produced by:</p></div>
              <div><input type="text" class="form-control"/></div>
            </div>
            <div style="background-color:#F6FF1F; margin-top: 10px; font-size: 10.6px;"><p>For lower pricing, consider changing your quantity and ship date</p></div>
          </td>
          <td class="orderLink"><p>£142</p></td>
          <td class="orderLink"><p>£142</p></td>
          <td class="orderLink">
            <div class="edit">
              <a href="#">Edit</a>
              <img style="margin-left:5px; margin-top: 3px;" src="assets/images/close.png">
            </div>
          </td>
        </tr>

        <tr>
          <td class="orderLink"><div class="pictureBoxFile"></div><label style="font-size: 10px;">filename.stl</label></td>
          <td class="TabletView orderLink"><p>3D Printing</p></td>
          <td style="font-size: 12px;" class="orderLink"><p>Material:PLA<br>Colour:Black<br>Filling:Light<br>Quality:Low<br>Post Processing:Sanding</p></td>
          <td class="orderLink">
            <div style="display:flex;">
              <div><p>Quantity:</p></div>
              <div><select style="height:100%; margin-left: 35px!important;" class="form-control"><option>1</option></select></div>
            </div>
            <div style="display:flex;">
              <div><p>Produced by:</p></div>
              <div><input type="text" class="form-control"/></div>
            </div>
            <div style="background-color:#F6FF1F; margin-top: 10px; font-size: 10.6px;"><p>For lower pricing, consider changing your quantity and ship date</p></div>
          </td>
          <td class="orderLink"><p>£142</p></td>
          <td class="orderLink"><p>£142</p></td>
          <td class="orderLink">
            <div class="edit">
              <a href="#">Edit</a>
              <img style="margin-left:5px; margin-top: 3px;" src="assets/images/close.png">
            </div>
          </td>
        </tr>
      </tbody>
    </table>
 </div>

这就是scss：

.totalCart {
border: 1px solid #BBB;
border-radius: 5px;
margin: 0px 10px;
padding: 0px 10px;

.cartSteps {
  display: flex;
  justify-content: space-between;
}

.cartContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and ( max-width: 1026px ) {
  .TabletView {
    display: none;
  }

  .TabletView.col-xs-2.col-md-1 {
    display: none;
  }
}