使用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;
}
答案 0 :(得分：0)
我创建了一个与您的需求相似的基本结构，其中包含5列和5个标签。
对于标签，您需要使用.nav-justified来使标签宽度相等。
对于列，您可以跳过列数，而仅使用类.col进行5列布局。