引导面板看上去不对

Question

我现在正在玩Bootstrap，并试图理解这一切。我正在尝试创建以下的图像，并作出调整等。

​

​

到目前为止，我有这个，但你可以看到它看起来不对:我试图使图像更大，因为我想要一个更大的大小，但它破坏了一切。这是我的代码：

HTML：

<div class="container">
  <div class="Mainbody3">
    <div class="pancontrol">
      <div class="panel panel-default">
        <div class="panel-heading">Panel Title</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-4 col-md-3 col-sm-4 col-xs-3">
              <div class="panel panel-default">
                <div class="panel-body"><img src="https://juicerecipes.com/media/cache/7b/c1/7bc189caa0876b4793f6a0ddfd32dae8.jpg" alt="" class="img-responsive" />
                </div>
              </div>
              <div class="panel panel-default">
                <p>
                  Button
                </p>
              </div>
            </div>
            <div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
              <h4 align="center">
                List Title
              </h4>
              <ul class="list-group">
                <li class="list-group-item">Item One</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
              </ul>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
          </div>
        </div>
        <div class="panel-footer">
            Here comes some text
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

pancontrol{
    border: 1px solid rgba(0, 0, 0, 0.65);  
    height: 183px;
    width: 800px;
    margin: auto;
    margin-top: 10px;
}

.list-group{
    width: 170px;
    margin: auto;
}

当你把窗口拉出来时，你可以看到图像变大了，但文字只到了底部。

Answer 1

你的两个主要列分别有-lg-10和col 4，这使布局溢出，因为它们加起来有14列，可用列的最大数目是12。类似地，col-xs-3和col-xs-6的加起来只有9，所以您可以而且很可能应该将其中一个或两个都加起来，以便它们也等于12。

在此之前：

<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

及之后：

<div class="col-lg-4 col-md-5 col-xs-6">
<div class="col-lg-8 col-md-7 col-xs-6">

我不太清楚你希望你的布局是什么样子，所以后面的代码只是一个例子。请记住，您不需要显式地设置每个大小的列的宽度。如果您省略了col-sm-[num]，例如，它将继承col-xs-[num]的属性

https://jsfiddle.net/dwrx7fpo/

编辑：

看到你给我看的例子网站，我做了一些调整。

<div class="col-lg-4 col-md-5 col-xs-12">
<div class="col-lg-8 col-md-7 col-xs-12">

将col类设置为col-xs-12将导致它们在移动视图或"xs“视图中堆栈。我还从width: 800px;选择器中删除了.pancontrol，因为它正在抛出布局。

https://jsfiddle.net/dwrx7fpo/2/