混合使用 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 列布局。
关于css - 我如何将这五个列框居中,以便它们与上面的引导按钮选项卡内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56221099/