html - 产品布局 Bootstrap

Question

我目前正在为我父亲开发一个无人机网站。我刚开始使用 Bootstrap ，它很有趣!但我确实经常遇到小问题。

我用了这个Website生成如下所示的布局:

我正在尝试显示轮播以将产品图片放入其中，旁边是一些规范或描述。但我似乎无法让图片适合您在这里看到的(或预览 here ):

我使用的代码包括旋转木马、标签按钮和有序列表如果需要更多代码请询问:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="images/Parrot-BeBop-Drone-14-MP-Full-HD-1080p-Fisheye-Camera-Quadcopter-Blue-0-3-300x300.jpg">
        </div>
        <div class="item">
          <img src="images/parrot_bebop_skycontroller_yellow_img1-500x500-300x300.jpg">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    
    <div class="col-md-4">
            <h3>
                h3. Lorem ipsum dolor sit amet.
            </h3>
            <ol>
                <li>
                    Lorem ipsum dolor sit amet
                </li>
                <li>
                    Consectetur adipiscing elit
                </li>
                <li>
                    Integer molestie lorem at massa
                </li>
                <li>
                    Facilisis in pretium nisl aliquet
                </li>
                <li>
                    Nulla volutpat aliquam velit
                </li>
                <li>
                    Faucibus porta lacus fringilla vel
                </li>
                <li>
                    Aenean sit amet erat nunc
                </li>
                <li>
                    Eget porttitor lorem
                </li>
            </ol>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable" id="tabs-628527">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-433983" data-toggle="tab">Beschrijving</a>
                    </li>
                    <li>
                        <a href="#panel-884437" data-toggle="tab">Specificaties</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-433983">
                        <p>
                            I'm in Section 1.
                        </p>
                    </div>
                    <div class="tab-pane" id="panel-884437">
                        <p>
                            Howdy, I'm in Section 2.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    

如果有人能帮我解决我的布局，那就太好了!

Answer 1

您可以将它们放在 1 行中，然后将其分开，使空间总和为 12。

<div class="container-fluid">
      <div class="row">
  <div class="col-md-6">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item">
          <img src="images/Parrot-BeBop-Drone-14-MP-Full-HD-1080p-Fisheye-Camera-Quadcopter-Blue-0-3-300x300.jpg">
        </div>
        <div class="item active">
          <img src="images/parrot_bebop_skycontroller_yellow_img1-500x500-300x300.jpg">
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
    <div class="col-md-4">
            <h3>
                h3. Lorem ipsum dolor sit amet.
            </h3>
            <ol>
                <li>
                    Lorem ipsum dolor sit amet
                </li>
                <li>
                    Consectetur adipiscing elit
                </li>
                <li>
                    Integer molestie lorem at massa
                </li>
                <li>
                    Facilisis in pretium nisl aliquet
                </li>
                <li>
                    Nulla volutpat aliquam velit
                </li>
                <li>
                    Faucibus porta lacus fringilla vel
                </li>
                <li>
                    Aenean sit amet erat nunc
                </li>
                <li>
                    Eget porttitor lorem
                </li>
            </ol>
        </div>
      </div>
  </div>

简化版

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
             //courosal
            </div>
        </div>
        <div class="col-md-4">
            //Spek
        </div>
    </div>
</div>

如您所见，我为它们添加了一个容器，并将它们排成一行。但为什么是 6 和 4？总和不是 10 吗？

嗯，您的 CSS 有问题。它在左侧给出了一个奇怪的空间。

但希望它能帮助您了解 bootstrap 的强大功能。