Bootstrap面板看起来不正确

Question

我现在正在玩Bootstrap并试图理解这一切。我正在尝试在下面创建此图像并进行调整等。

到目前为止，我有这个，但你可以看到它看起来不正确：我试图让图像更大，因为我想要更大的尺寸，但它搞砸了一切。这是我的代码：

HTML：

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

CSS：

{{1}}

当您在jsfiddle上拉出窗口时，您可以看到图像放大但文本只是在底部。

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会导致它们堆叠在移动设备或者＃34; xs＆＃34;视图。我还从.pancontrol选择器中删除了width: 800px;，因为它丢弃了布局。

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