Twitter Boootstrap列宽取决于父容器的宽度

Question

我有一个控件可能出现在主要内容或侧栏中：

<main id="main-content" class="col-md-8">
    <div id="mycontrol" class="col-sm-12 col-md-6">..</div>
</div>
<aside id="sidebar" class="col-md-4">
    <div id="mycontrol" class="col-sm-12 col-md-6">..</div>
</div>

所以我需要＆＃34; mycontrol＆＃34;填充侧边栏的宽度，但只有主要内容的一半宽度。

我理解＆＃34; mycontrol＆＃34;将使用＆＃34; col-md-6＆＃34;适用于中型容器和＆＃34; col-sm-12＆＃34;用于小容器。但在我的情况下，侧边栏是小的（小于768px），但它填充了侧边栏宽度的一半。

我试图用<div class='container'></div>包围侧边栏，但它没有用，而且＆＃34; mycontrol＆＃34;主要内容和侧边栏都显示半宽。

正如您在屏幕截图中看到的那样。在两种情况下，控件似乎都填充了一半的列宽。我希望主要内容的宽度为50％，但侧边栏的宽度为100％，但使用相同的css类定义。

修改

我知道我可以根据所需的宽度使用不同的类名。但是我不可能＆＃34; mycontrol＆＃34;是一个可重复使用的控件。

Answer 1

这应解决您的问题，请务必覆盖bootstrap。

HTML：

<main id="main-content" class="col-md-8">
    <div id="mycontrol" class="col-sm-12 col-md-6">..</div>
</div>
<aside id="sidebar" class="col-md-4">
    <div id="mycontrol" class="col-sm-12 col-md-6">..</div>
</div>

的CSS：

#sidebar #mycontrol {width: 100%;}
#main-content #mycontrol {width: 50%;}

Answer 2

如果您可以添加小提琴，它会有所帮助。我在您的帖子中提到的是，您正在寻找的内容是标签宽度的100％或宽度的50％。

您需要覆盖引导类以完成您要查找的内容。您可以通过添加以下CSS来实现此目标，该CSS将针对您要查找的特定mycontrol并正确设置其div。

#sidebar #mycontrol {width: 100%;}
#main-content #mycontrol {width: 50%;}

或者，您也可以将自定义类添加到第一个div中，并在该类中设置宽度。

HTML：

<main id="main-content" class="col-md-8">
    <div id="mycontrol" class="col-sm-12 col-md-6 setWidthTo50">..</div>
</div>
<aside id="sidebar" class="col-md-4">
    <div id="mycontrol" class="col-sm-12 col-md-6">..</div>
</div>

CSS：

.setWidthTo50 { width: 50% }