如何创建一个简单的选项卡菜单

Question

如果我有很多文字，我的标签效果很好。

但是当我收缩文本时，标签变得越来越小。知道可能导致这种情况的设置吗？

我知道它只适用于bootstrap。我想我的设置搞砸了我的标签。在我的自定义CSS中我应该寻找什么？这是我的css：https://ufile.io/ve4xc

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div role="tabpanel">
                        <div class="col-sm-3">
                            <ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
                                <li role="presentation" class="brand-nav active"><a href="#app" aria-controls="app" role="tab" data-toggle="tab">Application</a></li>
                                <li role="presentation" class="brand-nav"><a href="#gitlab" aria-controls="gitlab" role="tab" data-toggle="tab">GitLab</a></li>
                                <li role="presentation" class="brand-nav"><a href="#docker" aria-controls="docker" role="tab" data-toggle="tab">Docker</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-9">
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="app">
                                    <p>
                                        Lo
                                    </p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="gitlab">
                                
                                </div>
                                <div role="tabpanel" class="tab-pane" id="docker">
                                    <p>
                                        Lorem ipsizzle dolor away amizzle, consectetuer pizzle elizzle. Nullizzle yo velizzle, check it out volutpizzle, quis, gravida vel, yo.
                                        Ma nizzle eget tortor. Sizzle eros. My shizz izzle dolizzle gizzle turpis tempizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle.
                                        Maurizzle pellentesque nibh izzle own yo'. Check it out in tortor. Pellentesque fizzle rhoncizzle nisi.
                                    </p>
                                    <p>
                                        In hac habitasse platea dictumst. Shizzlin dizzle dapibus. You son of a bizzle tellizzle urna, pretizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle,
                                        ghetto ac, check it out vitae, nunc. Shizzlin dizzle suscipizzle. Integizzle sempizzle velit sizzle dizzle.
                                    </p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="tab4">
                                    <p>
                                        Collaboratively administrate empowered markets via plug-and-play networks.
                                        Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without
                                        revolutionary ROI.
                                    </p>
                                    <p>
                                        Efficiently unleash cross-media information without cross-media value.
                                        Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar
                                        solutions without functional solutions.
                                    </p>
                                    <p>
                                        Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate
                                        one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service
                                        for state of the art customer service.
                                    </p>
                                </div>
                            </div>

Answer 1

嗯，我的猜测是你需要将类“row”设置为第一个div：

<div role="tabpanel" class="row">
                        <div class="col-sm-3">
                         ...

试试吧。我还建议您检查bootstrap网格文档以使其正确。