Question

好的，所以我在网页上有一行会显示一个按钮列表。按钮的宽度需要是动态的，因为它正在运行填充用户输入的单词。另外，一旦组合宽度行中的所有按钮都等于列的宽度，我希望后续按钮显示在下一行。这是我的HTML：

     <div class='container'>
        <div class='row'>
          <div class="col-xs-4 btn-group" role="group" align='center' id="actualList" style="margin-right:50px; visibility:hidden;">
            <h3>Possible words:</h3>
            <div class="list-group" id="wordList">
              <button type="button" class="btn btn-default">button</button>
            </div>    
          </div>
       </div>
     </div>

当我在JSfiddle上尝试时，按钮的宽度是动态的，但对于某些原因它在我的代码中不起作用。我认为这些行搞砸了。有什么建议吗？

修改

所以我弄明白弄乱了什么。在我的自定义样式表中，我对.btn类进行了一些更改。我需要我网站另一部分的自定义样式。有没有办法忽略我的样式表只是为了这个列表？

Answer 1

所以我弄明白弄乱了什么。在我的自定义样式表中，我对.btn类进行一些更改。我需要自定义样式我网站的另一部分。有没有办法忽略我的风格表只是这个列表？

一种好方法是将自适应选择器添加到自定义.btn类的部分。像

这样的东西

.myOtherSitePortion .btn {
    /* .btn customizations */
}

然后，对于您需要应用自定义样式的页面，只需添加类myOtherSitePortion，就像这样

<body class="myOtherSitePortion">
     ....
     <input class="btn"...

我假设您不需要页面上需要动态引导程序宽度的自定义样式。如果是，只需将类移动到包含要自定义的按钮的父元素，但不包括需要动态引导宽度的部分。

引导动态按钮宽度

1 个答案: