将bootstrap grid div转换为table tr td

时间:2018-01-11 13:15:55

标签: php jquery twitter-bootstrap twitter-bootstrap-3

是否可以使用PHP或JQuery将div row and col转换为table tr td格式?

我一直在做一些谷歌搜索,但所有结果都是相反的。表到Div。

我无法想象用简单的str_replace来做这件事,因为你无法真正知道行或者col的结尾div。所以我希望你能引导我走上正确的道路。

HTML:

<section>
    <div class="row">
        <div class="col-sm-6" data-type="container-content">
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </div>
        <div class="col-sm-6" data-type="container-content">
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </div>
    </div>
</section>
<section>
        <div class="row">
            <div class="col-sm-6" data-type="container-content">
                <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
                </section>
            </div>
            <div class="col-sm-6" data-type="container-content">
                <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
                </section>
            </div>
        </div>
    </section>

到桌子:

<table>
    <tr>
        <td>
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </td>
        <td>
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <section data-type="component-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
            </section>
        </td>
        <td>
            <section data-type="component-text"><h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
            </section>
        </td>
    </tr>
</table>

谢谢

1 个答案:

答案 0 :(得分:1)

您只能使用css执行此操作 - 将display类型更改为tabletable-rowtable-cell

&#13;
&#13;
.table {
  display: table;
  width: 100%;
}

.table > .row {
  display: table-row;
}

.table > .row > div {
  display: table-cell;
}
&#13;
<section class="table">
  <div class="row">
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
      </section>
    </div>
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
      </section>
    </div>
  </div>
</section>
<section class="table">
  <div class="row">
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae o<span style="color:#00FFFF;">fficiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</span></p>
      </section>
    </div>
    <div class="col-sm-6" data-type="container-content">
      <section data-type="component-text">
        <h2><span style="color:#FF8C00;"><span style="font-family:comic sans ms,cursive;"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro labore architecto fuga tempore omnis aliquid, rerum numquam deleniti ipsam earum velit aliquam deserunt, molestiae officiis mollitia accusantium suscipit fugiat esse magnam eaque cumque, iste corrupti magni? Illo dicta saepe, maiores fugit aliquid consequuntur aut, rem ex iusto dolorem molestias obcaecati eveniet vel voluptatibus recusandae illum, voluptatem! Odit est possimus nesciunt.</strong></span></span></h2>
      </section>
    </div>
  </div>
</section>
&#13;
&#13;
&#13;

在上面的示例中,我在顶级部分添加了一类表,以便可以将它们与其他部分区分开来。

它还保持你的html结构在语义上正确(因为它看起来不像数据是表格式的 - 所以你不应该使用表标签)