Question

我在尝试将Bootstrap折叠面板上的“打开/关闭”图标对齐时遇到麻烦...它总是在标题文本上方或下方...我希望所有这些都在一个页面上

这是我所得到和想要的图像。

...这是 BAD 版本的标记...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>
    
    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    <a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">
                        <table style="width: 100%">
                            <tr>
                                <th style="padding: 20px; text-align: left;">Data Item 1</th>
                                <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                                <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                            </tr>
                        </table>
                    </a>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Answer 1

我做到了，请运行代码。

我认为在“ td”中使用了标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>
    
    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    
                        <table style="width: 100%">
                            <tr>
                                <th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"> &nbsp &nbsp Data Item 1</a></th>
                                <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                                <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                            </tr>
                        </table>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <style>
        #Basket {
        }


            #Basket .panel-title .trigger:before {
                content: '\e114';
                font-family: 'Glyphicons Halflings';
                vertical-align: middle;
                text-decoration: none;
                color: green;
            }

            #Basket .panel-title .trigger.collapsed:before {
                color: green;
                content: '\e080';
                text-decoration: none;
            }
    </style>

    <title></title>
</head>
<body id="Basket">
    <div class="panel-group">
        <div class="panel panel-danger" style="padding: 0px;">
            <div class="panel-heading" style="padding: 5px;">
                <div class="panel-title" style="padding: 20px">
                    <table style="width: 100%">
                        <tr>
                            <th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"></a>&nbsp &nbsp Data Item 1</th>
                            <th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
                            <th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
                        </tr>
                    </table>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                    <div class="panel-body">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    Just some plain old text
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

无法使折叠面板图标对齐-Bootstrap CSS

2 个答案: