html - Bootstrap 面板看起来不正确

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;
}

当您在 jsfiddle 上拉伸(stretch)窗口时，您可以看到图像放大了，但文本只是移到了底部。

Answer 1

你的两个主列分别有col-lg-10和col-lg-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">

我不确定您希望您的布局看起来如何，因此 After 代码只是一个示例。请记住，您不需要为每种尺寸显式设置列宽。例如，如果您省略 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-xs 类设置为 col-xs-12 将导致它们在移动或“xs” View 中堆叠。我还从 .pancontrol 选择器中删除了 width: 800px;，因为它会影响布局。

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