Как расположить эти пять столбцов по центру, чтобы они совпали с вкладками кнопок Boostrap выше? - PullRequest
Новая
       3

Как расположить эти пять столбцов по центру, чтобы они совпали с вкладками кнопок Boostrap выше?

0 голосов
/ 20 мая 2019

Использование смеси css и начальной загрузки 4. Я сделал адаптивную вкладку, список таблеток в начальной загрузке, но, похоже, не могу заставить эти поля соответствовать приведенным выше вкладкам. Я хочу, чтобы края полей 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;
}

1 Ответ

0 голосов
/ 20 мая 2019

Я создал базовую структуру, аналогичную вашей потребности, с 5 столбцами и 5 вкладками.

Для вкладок необходимо использовать .nav-justified, чтобы сделать вкладки равной ширины. Для столбцов вы можете пропустить количество столбцов и просто использовать класс .col, чтобы создать макет из 5 столбцов.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...