html - 选项卡 Pane ( Bootstrap )在移动/桌面中无法正常工作

Question

我在我的 html 中创建了一个 tab-pane，它工作正常，但我没有得到预期的输出。

1. I wanted content of the tab to be filled in 3/4th of the screen ( both in desktop and mobile).

但是我发现标签内容只占据了屏幕的一半。在手机中它非常可怕。

请检查所附图片... Desktop version . mobile version

代码在这里:

<div class="container">
  <ul class="nav nav-pills" id="SkillsTab">

    <li class="active">
      <a href="#skill1" role="pill" data-toggle="pill"><i class="fa fa-star-o"></i> Web Designing </a></li>
    <li><a href="#skill2" role="pill" data-toggle="pill"><i class="fa fa-envelope-o"></i>Marketing</a></li>
    <li><a href="#skill3" role="pill" data-toggle="pill"><i class="fa fa-globe"></i>SEO</a></li>
    <li><a href="#skill4" role="pill" data-toggle="pill"><i class="fa fa-magic"></i>Mobile Design</a></li>
    <li><a href="#skill5" role="pill" data-toggle="pill"><i class="fa fa-paint-brush"></i>Graphic Design</a></li>
    <li><a href="#skill6" role="pill" data-toggle="pill"><i class="fa fa-users"></i>Corporate Identity</a></li>

  </ul>

  <div class="tab-content">
    <div class="tab-pane active bounceInRight" id="skill1">
      <h2><i class="fa fa-star-o"></i>Web Designing</h2>
      <p class="text-justify">The Internet is an ever changing environment that demands that you keep up with the latest and greatest communication platforms.
        <br>
        <br>

      </p>

Answer 1

在您发布其余代码后，答案可能就在您的 HTML 结构中。您需要将标签包装在 .row 中，然后是一些网格元素

<div class="container">
    <div class="row">
        <div class="col-md-12">
            // content here
        </div>
    </div>
</div>

Bootstrap 使用负边距，然后只要使用正确的 HTML 结构就可以平衡它们。阅读 bootstrap grid system .