Question

我有一个包含6列动态（php）的菜单，这意味着我无法更改html。

我有：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        // callback for the onclick event on the choice buttons
        // (not used)
        // copy the text of a choice to the selection field
        function choice(s) {
            var txt = $(s).text();//s.textContent;
            $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//copies selected text to selection field
            $(s).parent().toggle();//hide(); hides all buttons of the block

            //var d1 = $('div.selection').text();//ok
            //var d9 = $(s).closest('.choiceblock').find('selection').text();
            //var l9 = $(s).closest('.choiceblock').find('selection').length;
            //var d2 = $('div#material_quant div.selection').text();//ok
            //var n2 = $('div#material_quant div.selection').attr('name');
            //var d3 = $('div#material_quant div.choices').siblings('.selection').text();
            //var n3 = $('div#material_quant div.choices').siblings('.selection').attr('name');
            //var l3a = $('div#material_quant div.choices').siblings().length;//?
            //var l3 = $('div#material_quant div.choices').siblings('.selection').length;//0
            //var d4 = $(s).parent().parent().siblings('.selection').text();
            //var n5 = $(s).parent().attr('name');
            //var n6 = $(s).parent().parent().attr('name');
            //var d5 = $(s).attr('name');
            //var d5a = s.nodeName;//DIV
            //var d6 = s.parentElement.className;//ch_qualitative
            //var d7 = s.parentElement.parentElement.className;//choices
            //var d8 = s.parentElement.parentElement.parentElement.nodeName;//DIV
            //var d10 = $(s.parentElement.parentElement.parentElement.nodeName).children('.selection').length;//19
            //$(s.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);//works
            //$(s).parent().parent().siblings('.selection').text(txt);
            return false;
        }
        $(document).ready(function () {
            // click handler on the text buttons
            $('div.choices div.button').click(function () {
                // get the selected text
                var txt = $(this).text();
                // copy selected text to selection field
                $(this.parentElement.parentElement.parentElement.nodeName).children('.selection').text(txt);
                $(this).parent().hide();
                return false;
            });
            // click handler on the entire block
            $('div#material_quant div.button').click(function () {
                $('div.choices').toggle()
            });
        });
    </script>
    <style>
        div.button {
            float: left;
            height: 2em;
            line-height: 2em;
            width: 6em;
            color: white;
            background-color: darkgreen;
            text-decoration: none;
            display: inline-block;
            margin: 1em;
            text-align: center;
        }
        div.selection {
            display: inline-block;
            height: 2em;
            line-height: 2em;
            margin: 1em;
        }
    </style>
</head>
<body>
    <div id="material_quant" class="choiceblock">
        <div class="button">Materiaal..</div>
        <div class="selection">(geen)</div>
        <div style="clear: both;" />
        <div class="choices">
            <div class="ch_qualitative">
                <div class="button">Veegstof</div>
                <div class="button">Stripmonster</div>
                <div style="clear: both;" />
            </div>
            <div class="ch_quantitative">
                <div class="button">Vloerb</div>
                <div class="button">Isolatie</div>
                <div style="clear: both;" />
                <div class="button">Plaat</div>
                <div class="button">Kit</div>
                <div style="clear: both;" />
                <div class="button">Koord/Vilt</div>
                <div class="button">Bitumen</div>
                <div style="clear: both;" />
                <div class="button">Pakking</div>
                <div class="button">Cement</div>
            </div>
        </div>
    </div>
</body>
</html>

我需要将.col-sw-6 { width: 16.6666%; }替换为width。我已经尝试过了：

max-width

但它不起作用。如果可能只涉及CSS，有关如何做到这一点的任何想法吗？

Answer 1

.col-sw-6类包含宽度设置定义。如果要覆盖它，请从div标签中删除该类。

Answer 2

我认为整个问题是你不应该只用css来改变它。

你只是做错了，第一个指标就是你试图将宽度设置为6列宽的元素。

实际上你应该根据你的PHP输出更改类名，所以当PHP返回3项时，你应该有col-md-4，当输出是4项时，它应该是col-md-3等。

这样您就不需要： 1.与一些愚蠢的CSS规则作斗争 2.覆盖您的网格系统（这通常是错误的想法）。

因此，不是仅在css中处理宽度，而是更新代码以根据导航项的数量更改具有正确类名的html表示，然后每个类将具有正确的css宽度设置。

如果您总是有6列，那么您需要更改宽度吗？如果没有，（我假设你提到它的动态），那么我写的是有意义的。

用max-width替换宽度

2 个答案: