Question

我想并排放置两个引导表，就像在这个问题中回答一样：

不幸的是，我没有得到那里提到的结果。

我的代码如下：

<html>
<style>
    body {background-color: black;}
</style>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>

<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>        
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

我得到的是这样的：

提前致谢

Answer 1

你的代码中有拼写错误。你需要更换

<div class="col-sx-6">

带

<div class="col-xs-6">

Answer 2

对于所有分辨率，您应该执行以下操作：

col-lg-6 col-md-6 col-sm-6 col-xs-6

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <table class="table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Location</th>
          <th>Message</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <table class="table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Location</th>
          <th>Message</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

＆＃13;

Answer 3

如果您想在移动设备屏幕和桌面屏幕中使用两个表（并排），那么 - 将此<div class="col-sx-6">更改为<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

如果您想在桌面屏幕中使用两个表而不是在移动屏幕中。将此<div class="col-sx-6">更改为<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

Answer 4

您在两个栏目上都输了一个错字。你写了col-sx-6而不是col-xs-6。（列，在超小屏幕上显示它，更大，宽度为6）

使用col-sx-6时，它只是一个div，它将是100％宽。将其更改为col-xs-6将解决您的问题。

此外，在引导程序中，通常会将<div class="row">放在<div class="container">内。请参阅：https://getbootstrap.com/docs/3.3/css/#overview-container

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Your code, using col-xs-6</h1>
<div class="row">
    <div class="col-sx-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-sx-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<h1>Corrected code using col-xs-6</h1>
<div class="row">
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="col-xs-6">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Location</th>
                    <th>Message</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
</div>

＆＃13;

Answer 5

试试吧：

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="row">

        <div class="col-lg-6 col-md-6 col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Message</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Message</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    </body>
    </html>

两个引导表并排

5 个答案: