как сделать 6 вкладок адаптивными для рабочего стола и мобильного просмотра на bootstrap?

Question

Я разработал 6 вкладок для карты адресов. но это не правильно реагировать после 800px. как сделать так, чтобы он корректно реагировал и выглядел хорошо на мобильных телефонах, вкладках, в левой части вкладки появляется пробел ipad.some. Я пытался с помощью добавления медиа-запросов, но все же он не реагирует на мобильные представления. это код, который я пробовал.

$('#bologna-list a').on('click', function(e) {
  e.preventDefault()
  $(this).tab('show')
})

.address {
  width: 141px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12 col-lg-9 col-sm-12 col-md-6" style="margin-top: 10px;margin-bottom:14px;">
  <div class="card" style="background-color: lightgoldenrodyellow;">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
        <li class="nav-item address">
          <a class="nav-link active" href="#description" role="tab" aria-controls="description" aria-selected="true">KalyanNagar</a>
        </li>
        <li class="nav-item address">
          <a id="mm" class="nav-link" href="#history" role="tab" aria-controls="history" aria-selected="false">MS-Palya</a>
        </li>
        <li class="nav-item address">
          <a class="nav-link" href="#deals" role="tab" aria-controls="deals" aria-selected="false">Mysore</a>
        </li>
        <li class="nav-item address">
          <a class="nav-link" href="#aaa" role="tab" aria-controls="history" aria-selected="false">Begur</a>
        </li>
        <li class="nav-item address">
          <a class="nav-link" href="#bbb" role="tab" aria-controls="deals" aria-selected="false">Chamrajpet</a>
        </li>
        <li class="nav-item address">
          <a class="nav-link" href="#ccc" role="tab" aria-controls="history" aria-selected="false">Sarjapur</a>
        </li>

      </ul>
    </div>
    <div class="card-body" style="line-height: 1.2;margin-left:26px;margin-top:-46px">
      <h4 class="card-title"><b>Royale Concorde International School</b></h4>

      <div class="tab-content mt-3">
        <div class="tab-pane active" id="description" role="tabpanel">
          <p>
            <a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15548.642782402585!2d77.6424985!3d13.0254368!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x579ddbfe8e3e88e3!2sRoyale+Concorde+International+School!5e0!3m2!1sen!2sin!4v1463564768212" style="color: black;">
                                                6th 'B' Main, II Block, HRBR Layout, Kalyan Nagar, Bangalore-560043.</a>
          </p>
          <p>
            <a href="tel:080 2543 5454/55 " style="color: black">080 2543 5454/55 </a>
            <a href=" tel:+91 9071399 777" style="color: black"> +919071399 777</a>
          </p>
          <p>
            </span>
            <a href="mailto:principal@rcis.in" style="color: black;">principal@rcis.in / info@rcis.in</a></p>
          <iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15548.642782402585!2d77.6424985!3d13.0254368!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x579ddbfe8e3e88e3!2sRoyale+Concorde+International+School!5e0!3m2!1sen!2sin!4v1463564768212"
            style="color: black;">
                                        </iframe>

        </div>
        <!-- -------------------------------------------------------------- -->
        <div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
          <p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15544.848284314958!2d77.54903!3d13.085742!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4e1dfc0e19d8fe23!2sRoyale%20Concorde%20International%20School%20-CBSE%20MS.PALYA!5e0!3m2!1sen!2sin!4v1579748882201!5m2!1sen!2sin"
              style="color: black;margin-left:20px"> No.14, Sharadha Hills,
                                                Hesarghatta Main Road, Vidyaranya Post, M S Palya,
                                                Bangalore – 560097</a> </p>
          <p>
            <p>
              <a href="tel:+91 9071 399 777" style="color: black;">+91 9071 399 777</a>
            </p>
            <p>
              </span> <a href="mailto:rcischool@gmail.com" style="color: black;">rcischool@gmail.com</a></p>
            <iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15544.848284314958!2d77.54903!3d13.085742!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4e1dfc0e19d8fe23!2sRoyale%20Concorde%20International%20School%20-CBSE%20MS.PALYA!5e0!3m2!1sen!2sin!4v1579748882201!5m2!1sen!2sin"
              style="color: black;">
                                            </iframe>

        </div>
        <!-- -------------------------------------------------- -->
        <div class="tab-pane" id="deals" role="tabpanel" aria-labelledby="deals-tab">
          <p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15592.28450488265!2d76.60667!3d12.310997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a6ae97bcd960cb4!2sRoyale%20Concorde%20International%20School%20Mysore!5e0!3m2!1sen!2sin!4v1579748538845!5m2!1sen!2sin"
              style="color: black;">
                                                CA-Site No.2, Bogadi 2nd Stage, North Extension,Mysuru – 570026</a>
          </p>
          <p>
            <a href="tel:0821452 1275 " style="color: black;">0821452 1275 </a>
            <a href=" tel:+91 9071 399777" style="color: black;"> /+91 9071 399777</a>

            <p>
              </span> <a href="mailto: principal.mysore@rcis.in" style="color: black;">
                                                    principal.mysore@rcis.in /info.mysore@rcis.in</a></p>
            <iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15592.28450488265!2d76.60667!3d12.310997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a6ae97bcd960cb4!2sRoyale%20Concorde%20International%20School%20Mysore!5e0!3m2!1sen!2sin!4v1579748538845!5m2!1sen!2sin"
              style="color: black;">
                                            </iframe>

        </div>
        <!-- -------------------------------------------- -->
        <div class="tab-pane" id="aaa" role="tabpanel" aria-labelledby="deals-tab">
          <p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15557.058144566334!2d77.625737!3d12.890704!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6d4e932ebf3e735d!2sRoyal%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748775204!5m2!1sen!2sin"
              style="color: black;"> #81/1, Hongasandra, Begur Main Road, Bangalore –
                                                560068</a>
          </p>
          <p>
            <a href="tel:0802574 2060 " style="color: black;">0802574 2060 </a></p>

          <a href=" tel:+91 9071 399777" style="color: black;">/ +91 9071 399777</a>
          </p>
          <p>
            </span> <a href="mailto:  principal.begur@rcis.in" style="color: black;">
                                                principal.begur@rcis.in /info.begur@rcis.in</a></p>
          <iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15557.058144566334!2d77.625737!3d12.890704!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6d4e932ebf3e735d!2sRoyal%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748775204!5m2!1sen!2sin"
            style="color: black">
                                        </iframe>

        </div>

        <!-- ----------------------------------------------- -->
        <div class="tab-pane" id="bbb" role="tabpanel" aria-labelledby="deals-tab">
          <p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15552.711634340067!2d77.569835!3d12.960465!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe8eb3b993746ce2d!2sRoyale%20Concorde%20International%20School%20-%20CBSE%20%26%20ICSE!5e0!3m2!1sen!2sin!4v1579748918909!5m2!1sen!2sin"
              style="color: black;">31, 1st Main Road, Near Prakash Cafe, Chamarajpet,Bangalore – 560018</a>
          </p>
          <p>
            <a href="tel:080-41278855 /" style="color: black;">080-41278855 /a>
                                                <a href="tel:41252448 " style="color: black;"> / 41252448
                                                </a>
            <a href="tel:+91 9071 399 777" style="color: black;">/
                                                    +91 9071 399 777</a>
          </p>
          <p>
            </span> <a href="mailto:  principal.begur@rcis.in" style="color: black;">
                                                principal.begur@rcis.in</a>
            <a href="mailto:  /info.begur@rcis.in" style="color: black;">
                                                /info.begur@rcis.in</a>
          </p>
          <iframe style="height: 80%; width:100%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15552.711634340067!2d77.569835!3d12.960465!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe8eb3b993746ce2d!2sRoyale%20Concorde%20International%20School%20-%20CBSE%20%26%20ICSE!5e0!3m2!1sen!2sin!4v1579748918909!5m2!1sen!2sin"
            style="color: black">
                                        </iframe>

        </div>

        <!-- ------------------------------------------------ -->
        <div class="tab-pane" id="ccc" role="tabpanel" aria-labelledby="deals-tab">
          <p><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d62220.778654330745!2d77.667818!3d12.920658!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x781b67e13f265205!2sRoyale%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748735008!5m2!1sen!2sin"
              style="color: black;"> Sarjapur, Ring Road Junction, Bangalore</a>
          </p>
          <p>
            <a href="tel:+91 9071 399 777" style="color: black;margin-left:16px">
                                                +91 9071 399 777</a>

            <a href="tel:080 41476100" style="color: black;margin-left:16px">
                                                / 080 41476300 </a>
            <a href="tel:080 41476200" style="color: black;margin-left:16px">
                                                / 080 41476200 </a>
            <a href="tel:080 41476300 " style="color: black;margin-left:16px">
                                                / 080 41476300 </a>
            <a href="tel:080 41476400" style="color: black;margin-left:16px">
                                                / 080 41476400" </a>
            <a href="tel:+91 9071 399 777 style=" color: black;margin-left:16px ">
                                                / 91 9071 399 777" </a>
          </p>

          <p>
            </span> <a href="mailto:rcissarjapur@gmail.com" style="color: black;">rcissarjapur@gmail.com</a></p>
          <iframe style="height: 80%; width:100%;margin-bottom:-4px" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d62220.778654330745!2d77.667818!3d12.920658!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x781b67e13f265205!2sRoyale%20Concorde%20International%20School!5e0!3m2!1sen!2sin!4v1579748735008!5m2!1sen!2sin"
            style="color: black">
                                        </iframe>

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

Это изображение нашего пользовательского интерфейса

Answer 1

Вы имеете в виду, что это не полная ширина, если да, вы можете просто удалить col-sm-12 col-md-6 col-lg-9.

Во всяком случае, я не заметил никакого разрыва с левой стороны, я думаю, что у вас могут быть другие css осуществлено.

Кстати, я заметил много пропущенных открывающих и закрывающих тегов, таких как </span>, лучше проверить перед тем, как начать работу.