如何摆脱右侧的空白区域?

时间:2015-10-22 15:43:09

标签: html css twitter-bootstrap whitespace

我在工具栏下方的右侧发现了这个神秘的白色空间,旁边是我应该延伸到边缘的图片。它几乎就像我的导航栏延伸得太远了。我几乎没有注意到这一点,因为你需要向右滚动才能看到它。我试过玩照片和导航栏的宽度。同样的东西也出现在页脚上,它似乎与照片一致,这让我相信它的导航栏在延伸。我尝试删除导航栏中的一些内容,但似乎没有解决问题。

HTML:

row

CSS:

<div class="QtyWrapper ui-grid-b">
  <div class="ui-block-a">
    <input type="button" value="-" class="qtyminus" />
  </div>
  <div class="ui-block-b">
    <input type="text" name="myInputs[qty][]" value="0" class="qty" class="ui-block-b" />
  </div>
  <div class="ui-block-c">
    <input type="button" value="+" class="qtyplus" class="ui-block-c" />
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

你不需要在.navbar-header-xs之外排一行(导致溢出),我不相信有一类navbar-header只是body { padding: 0px; margin-top: align; background size: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .navbar.navbar-custom { margin-bottom: 0; max-width: 100%; } .navbar.navbar-custom { background-color: #CCE1F4; border-radius: 2px; font-size: 22px; } .navbar.navbar-custom .navbar-brand { color: #2f4f7f; } .navbar.navbar-custom.navbar-nav > li > a { color: #2f4f7f; } .navbar.navbar-custom .navbar-nav > li > a:hover, .navbar.navbar-custom .navbar-nav > li > a:focus { color: #000000; background-color: transparent } .navbar.navbar-custom .navbar-toggle { border-color: #2f4f7f; float: left; margin-left: 40px; } .navbar.navbar-custom .navbar-toggle:hover, .navbar.navbar-custom .navbar-toggle:focus { background-color: #2f4f7f; } .navbar.navbar-custom .navbar-nav > li { text-align: left; padding-left: 15px; padding-right: 25px; padding-top: 5px; },并且就选择性而言,我会为CSS添加一些一致性。

在Snippet中查看不同宽度的工作示例。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <nav class="navbar navbar-default navbar-custom" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav1">
        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav1">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.html">
            <img src="http://placehold.it/20x20" />
          </a>

        </li>
        <li><a href="stuff.html">Work</a>

        </li>
        <li><a href="stuff.html">About</a>

        </li>
        <li><a href="stuff.html">Skills</a>

        </li>
        <li><a href="stuff.html">Contact</a>

        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="container">
  <div class="top">
    <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" />
  </div>
</div>
<hr>
<nav class="navbar navbar-default navbar-custom" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav2">
        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav2">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.html">
            <img src="http://placehold.it/20x20" />
          </a>

        </li>
        <li><a href="stuff.html">Work</a>

        </li>
        <li><a href="stuff.html">About</a>

        </li>
        <li><a href="stuff.html">Skills</a>

        </li>
        <li><a href="stuff.html">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="top">
    <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" />
  </div>
</div>
&#13;
Dim startFolder = "C:\Users\me\Documents\Visual Studio 2012\Projects\project"
Dim fileList = New System.IO.DirectoryInfo(startFolder).GetFiles("*.vb", System.IO.SearchOption.AllDirectories)
Dim queryMatchingFiles = From file In fileList _
                             Where file.Extension = ".vb" _
                             Let fileText = GetFileText(file.FullName) _
                             Where fileText.Contains(word2Search) _
                             Select file.FullName

Debug.Print("The term " & word2Search & " was found in:")

For Each filename In queryMatchingFiles
    Debug.Print(filename)
Next
&#13;
&#13;
&#13;