我有一个视频滑块,我使用引导程序。现在我在滑块(旋转木马)中插入了一个表。它工作得很好,但我正在改变布局。下面的图片是我想要的版式。我已经把背景资料整理好了。问题是我无法在描述的列之间插入空格。如何在每个列中插入空格?

  .rowTwo{
  background-color: #491f43;
  }
  .carousel-control.left, .carousel-control.right {
    background-image: none
}
  h1{
  color: #ffffff;
  padding: 0px;
  }
  .txt_txt{
  color: #ffffff;
  font-size: 10pt;
  padding: 0px;
  line-height: 0px;
  }

身体
  <div class="item active">
            <table class="table table-bordered">
                <tr>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                </tr>
                <tr>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
            </table>
  </div>

preview site

最佳答案

不知道这是否可行。但你可以吃这样的东西

<div class="item active">
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>

  </div>

关于html - 在 bootstrap 中添加表空间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29836651/

10-12 05:57