Question

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

我希望在屏幕的3/4处填充标签的内容（包括桌面和移动设备）。

但我得到的标签内容只占据屏幕的一半。而且在手机中它非常恐怖。

请检查附加的图片... 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。

选项卡窗格（引导程序）在Mobile / Desktop中无法正常工作

1 个答案: