css - 我如何将这五个列框居中，以便它们与上面的引导按钮选项卡内联？

标签 css user-interface bootstrap-4

混合使用 css 和 bootstrap 4. 我在 bootstrap 中制作了一个响应式选项卡和药丸列表，但似乎无法让这些框与上面的选项卡对齐。 我希望 col-2 框的边缘与上面选项卡的边缘对齐。我该怎么做呢？提前致谢。

这里是截图链接 https://imgur.com/a/xLichKI

也许我应该改变宽度？我给了他们一类 col-2。 提前致谢。


    <div class="tab-content">


       <div id="wifi" class="tab-pane fade in active">
        <div  class="row">
        <div class="col-4">

            <div class="box">

                <div class="maincontainer">

                    <div class="thecard">

                        <div class="thefront text-center d-flex flex-column p-3">
                            <h1 class="mb-0">Basic Packet</h1>
                            <div class="border-dash-top speed">
                                <h3 class="num mb-0 wifi"><em>5</em></h3>
                                <span class="bit wifi">Mbit</span>
                                <h2 class="wifi">Internette rahatca gezinin</h2>
                            </div>
                            <div class="border-dash-top mt-auto price">
                                <div class="row no-gutters mt-2">
                                    <div class="col">1 AYLIK 110t</div>
                                    <div class="col border-dash-left">3 AYLIK 290t</div>
                                    <div class="col border-dash-left">6 AYLIK 550t</div>
                                    <div class="col border-dash-left">12 AYLIK 990t</div>

                                </div>
                            </div>
                        </div>

                        <div class="theback">
                            <h1>Basic Packet</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                            <button>Buy</button></div>

                    </div>
                </div>



            </div>

        </div>



        <div class="col-4">








            <div class="box">

                <div class="maincontainer wifi">

                    <div class="thecard">

                        <div class="thefront text-center d-flex flex-column p-3">
                            <h1 class="mb-0">Premium packet</h1>
                            <div class="border-dash-top speed">
                                <h3 class="num mb-0 wifi"><em>10</em></h3>
                                <span class="bit wifi">Mbit</span>
                                <h2 class="wifi">HD film izleyin</h2>
                            </div>

                            <div class="border-dash-top mt-auto price">
                                <div class="row no-gutters mt-2">
                                    <div class="col">1 AYLIK 140t</div>
                                    <div class="col border-dash-left">3 AYLIK 390t</div>
                                    <div class="col border-dash-left">6 AYLIK 750t</div>
                                    <div class="col border-dash-left">12 AYLIK 990t</div>

                                </div>
                            </div>
                        </div>




                        <div class="theback">
                            <h1>Premium Packet</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                            <button>Buy</button></div>

                    </div>
                </div>



            </div>




        </div>



   <div class="col-4">

<div class="box">

    <div class="maincontainer wifi">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column p-3">
<!--               <div class="d-flex flex-column text-center h-100">-->
                <h1>Elite Packet</h1>
                <div class="border-dash-top mt-auto speed">
                    <h3 class="num mb-0 wifi"><em>15</em></h3>
                    <span class="bit wifi">Mbit</span>
                     <h2 class="wifi">Internette oyun oynain</h2> 
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>
<!--                </div>-->
            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       




 </div> 
 </div>

 </div>                                     

<!--tab wifi                                    -->




<div id="adsl" class="tab-pane fade">    


  <div class="row" id="adslrow">                                                                                                                                     

<div class="col-2">

<div class="box">

    <div class="maincontainer adsl">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column">
<!--               <div class="d-flex flex-column text-center h-100">-->
<!--                <h1>Elite Packet</h1>-->
                <div class=" mt-auto speed" style="color:rgb(58,121,189)">
                    <h3 class="num mb-0 adsl"><em>15</em></h3>
                    <span class="bit adsl">Mbit</span>
<!--                     <h2 class="adsl">Internette oyun oynain</h2> -->
                       <div class="border-dash-top mt-auto"></div>
                       <ul class="netfeatures" style="list-style:none;">
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>

                     </ul> 
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>
<!--                </div>-->
            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       

</div> 




 <div class="col-2">

<div class="box">

    <div class="maincontainer adsl">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column">
<!--               <div class="d-flex flex-column text-center h-100">-->
<!--                <h1>Elite Packet</h1>-->
                <div class=" mt-auto speed">
                    <h3 class="num mb-0 adsl"><em>15</em></h3>
                    <span class="bit adsl">Mbit</span>


<!--                     <h2 class="adsl">Internette oyun oynain</h2> -->
                       <div class="border-dash-top mt-auto"></div>
                       <ul class="netfeatures" style="list-style:none;">
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>

                     </ul> 
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>
<!--                </div>-->
            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       

</div>



 <div class="col-2">

<div class="box">

    <div class="maincontainer adsl">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column">
<!--               <div class="d-flex flex-column text-center h-100">-->
<!--                <h1>Elite Packet</h1>-->
                <div class="mt-auto speed">
                    <h3 class="num mb-0 adsl"><em>15</em></h3>
                    <span class="bit adsl">Mbit</span>
<!--                     <h2 class="adsl">Internette oyun oynain</h2>-->
                       <div class="border-dash-top mt-auto"></div>
                       <ul class="netfeatures" style="list-style:none;">
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>

                     </ul>  
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>
<!--                </div>-->
            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       

</div>             


<div class="col-2">

<div class="box">

    <div class="maincontainer adsl">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column">
<!--               <div class="d-flex flex-column text-center h-100">-->
<!--                <h1>Elite Packet</h1>-->
                <div class="mt-auto speed">
                    <h3 class="num mb-0 adsl"><em>15</em></h3>
                    <span class="bit adsl">Mbit</span>
<!--                     <h2 class="adsl">Internette oyun oynain</h2> -->
                       <div class="border-dash-top mt-auto"></div>
                       <ul class="netfeatures" style="list-style:none;">
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>

                     </ul> 
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>
<!--                </div>-->
            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       

</div>                          


<div class="col-2">

<div class="box">

    <div class="maincontainer adsl">

        <div class="thecard">

            <div class="thefront text-center d-flex flex-column">
<!--               <div class="d-flex flex-column text-center h-100">-->
<!--                <h1>Elite Packet</h1>-->
                <div class="mt-auto speed">
                    <h3 class="num mb-0 adsl"><em>15</em></h3>
                    <span class="bit adsl">Mbit</span>
<!--                     <h2 class="adsl">Internette oyun oynain</h2>-->
                     <div class="border-dash-top mt-auto"></div>
                     <ul class="netfeatures" style="list-style:none;">
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>
                         <li>Lorem ipsum</li>

                     </ul> 
                </div>

                <div class="border-dash-top mt-auto price">
                    <div class="row no-gutters mt-2">
                        <div class="col">1 AYLIK 170t</div>
                        <div class="col border-dash-left">3 AYLIK 490t</div>
                        <div class="col border-dash-left">6 AYLIK 950t</div>
                        <div class="col border-dash-left">12 AYLIK 1550t</div>

                    </div>
                </div>

            </div>

            <div class="theback h-100">
                <h1>Elite Packet</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p>
                <button>Buy</button></div>

        </div>
    </div>                



 </div>       

</div> 
 </div>   

 </div>

<!--ADSL TAB ENDS HERE-->










.row .col-2 {
    width: 200% !important;
    padding: 0px !important;
}



.row .col-2 .box {
    width: 100%;
}


div.maincontainer.adsl {
    margin-top: 0px !important;
}




div.maincontainer.adsl .col{
font-size: 0.6rem;
}


div.row .col-2 {
    margin: 0 auto;
}
#adsl {
    margin-left: -1px;
}

div.row#adslrow {
    margin-left: -35px  !important;
} 


div#adsl.tab-pane {
   margin: 0 auto;
}

.adsl ul.netfeatures{
    list-style: none !important;
}

最佳答案

我已经创建了一个与您的要求类似的基本结构，包含 5 列和 5 个标签。

对于标签，您需要使用.nav-justified 使标签等宽。 对于列，您可以跳过列数，只使用类 .col 来制作 5 列布局。

https://codepen.io/rhythm19/pen/JqrdVP

关于css - 我如何将这五个列框居中，以便它们与上面的引导按钮选项卡内联？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56221099/

上一篇：jquery - HTML textarea 不可点击(并且不能在里面输入)

下一篇：javascript - 如何在悬停后仅使用 css 而不是 Javascript 延迟菜单可见性

相关文章：

html - 使用 -moz-transform 进行 CSS 转换

css - 改变类风格

jquery - 即使在窗口调整大小后也将绝对定位的 DIV 居中(用于响应式设计)

html - 淡入颜色按钮从 btn-primary 到 btn-success

javascript - 如何验证手机号在 Bootstrap 4 中使用约束验证？

javascript - 使用 javascript 显示选定复选框的列表

javascript - 如何使用onclick更改多个div的颜色

Android - 向上滑动面板(库)圆角

git - 如何删除 Gitlab 仓库

android - 如何自定义对话框

©2024 IT工具网  联系我们