0

关于 bootstrap-4 导航菜单，有人可以建议如何修复嵌套的子菜单，以便相应的内容 - “链接按钮 1”“链接按钮 2”等 - 显示在子菜单的右侧而不是子菜单下方？

<div class="container-fluid">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="nav flex-column nav-pills" id="pillnav" role="tablist" aria-orientation="vertical">
                            <a class="nav-link" id="pill1tab" data-toggle="pill" href="#pill1" role="tab" aria-controls="pill1" aria-selected="true">Pill 1</a>
                            <a class="nav-link" id="pill2tab" data-toggle="pill" href="#pill2" role="tab" aria-controls="pill2" aria-selected="false">Pill 2</a>                            
                        </div>
                    </div>                  
                    <div class="col-sm-9">
                        <div class="tab-content" id="pillcontent">
                            <div class="tab-pane fade" id="pill1" role="tabpanel" aria-labelledby="pill1tab">
                                
                                <div class="nav flex-column nav-pills" id="choice1nav" role="tablist" aria-orientation="vertical">
                                    <a class="nav-link" id="choice1-1tab" data-toggle="pill" href="#choice1-1" role="tab" aria-controls="choice1-1" aria-selected="true">Choice 1-1</a>
                                    <a class="nav-link" id="choice1-2tab" data-toggle="pill" href="#choice1-2" role="tab" aria-controls="choice1-2" aria-selected="false">Choice 1-2</a>    
                                </div>
                                <div class="tab-content" id="choice1content">
                                    <div class="tab-pane fade" id="choice1-1" role="tabpanel" aria-labelledby="choice1-1tab">Choice 1-1 content</div>
                                    <div class="tab-pane fade" id="choice1-2" role="tabpanel" aria-labelledby="choice1-2tab">Choice 1-2 content</div>
                                </div>
                                
                            </div>
                            <div class="tab-pane fade" id="pill2" role="tabpanel" aria-labelledby="pill2tab">                               
                                
                                <div class="nav flex-column nav-pills" id="choice2nav" role="tablist" aria-orientation="vertical">
                                    <a class="nav-link" id="choice2-1tab" data-toggle="pill" href="#choice2-1" role="tab" aria-controls="choice2-1" aria-selected="true">Choice 2-1</a>
                                    <a class="nav-link" id="choice2-2tab" data-toggle="pill" href="#choice2-2" role="tab" aria-controls="choice2-2" aria-selected="false">Choice 2-2</a>    
                                </div>
                                <div class="tab-content" id="choice1content">
                                    <div class="tab-pane fade" id="choice2-1" role="tabpanel" aria-labelledby="choice2-1tab">Choice 2-1 content</div>
                                    <div class="tab-pane fade" id="choice2-2" role="tabpanel" aria-labelledby="choice2-2tab">Choice 2-2 content</div>
                                </div>                              
                                
                            </div>                          
                        </div>
                    </div>
                </div>
            </div>
4

0 回答 0