Question

我想在同一行上显示两行（[('hdfs://meihui/user/ydzhao/2017/05/01/TRAFF_20170501200100.txt', 2), ('hdfs://meihui/user/ydzhao/2017/05/01/TRAFF_20170501200200.txt', 1)]），宽度相等。我尝试将tr添加到col-sm-6，但td的内容会显示在两个单独的行上。这是html：

tr

Answer 1

＆＃13;

    <div className="jumbotron col-sm-12 text-left row">
                        <div className="panel panel-info">
                            <div className="panel-heading">
                                HEADER
                            </div>
                        </div>
    
                        <table className="table table-bordered table-condensed table-responsive">
                        <tbody>
                             <tr>
                                <td className="col-sm-6 col-centered leftCol">
                                    <div>
                                        {"hello1"}
                                    </div>
                                </td>
                                <td className="col-sm-6 col-centered rightCol">
                                    <div>
                                        {'hello2'}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

＆＃13;

Answer 2

<div className="jumbotron col-sm-12 text-left row">
                    <div className="panel panel-info">
                        <div className="panel-heading">
                            HEADER
                        </div>
                    </div>

                    <table className="table table-bordered table-condensed table-responsive">
                        <tbody>
                             <tr>
                                <td className="col-sm-6 col-centered leftCol" style="height: 200px;">
                                    <div>
                                        {"hello1"}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td className="col-sm-6 col-centered rightCol" style="height: 200px;">
                                    <div>
                                        {'hello2'}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

添加样式就可以了。

Answer 3

如果你想让它们在同一行上，你必须为tr标签插入类col-sm-6。

以下是您的代码的工作fiddle

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div className="jumbotron col-sm-12 text-left row">
  <div className="panel panel-info">
    <div className="panel-heading">
      HEADER
    </div>
  </div>

  <table className="table table-bordered table-condensed table-responsive">
    <tbody>
      <tr class="col-sm-6">
        <td className="col-centered leftCol">
          <div>
            {"hello1"}
          </div>
        </td>
      </tr>
      <tr class="col-sm-6">
        <td className="col-centered rightCol">
          <div>
            {'hello2'}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

使用bootstrap元素在同一行上放置两行

3 个答案: