Html 选项卡窗格（引导）在移动/桌面中工作不正常

我在html中创建了一个

选项卡窗格

，它工作正常，但没有得到预期的输出

我想在屏幕的四分之三处填充标签的内容（桌面和手机）

但我得到的标签内容只占据了屏幕的一半。而在手机上，这是非常容易的

请检查所附图片

代码如下：

<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>

网页设计
互联网是一个不断变化的环境，要求您跟上最新、最强大的通信平台。

在发布其余代码后，答案可能在HTML结构中。您需要将选项卡包装在

.row

中，然后是一些网格元素

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

//满足于此

---

引导使用负边距，然后平衡它们，只要使用正确的HTML结构。请仔细阅读。

您能发布完整的代码片段吗？你从一个

ul

元素的一半开始，用两个打开的

div

标签切断了我们。这是开始的

我尝试了这种方法添加行、col-md-12、col-sm-6等，但我得到了同样的结果，谢谢你的帮助。。。我会从一开始再试一次，然后找到你