列的異常寬度

我正在嘗試使用bootstrap創建一個設計，其中有一個固定的頂部導航欄，下面有2列。第一列有一個固定的頂部div與完整的父寬度和更多的內容，它可以滾動（固定的div和navbar斜線）。第二欄有一張圖片，涵蓋了整個欄目，僅此而已。列的異常寬度

我也做了以下內容：

<nav class="navbar navbar-default navbar-fixed-top black"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">OWOL</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">EVENTS</a></li> 
     <li><a href="#">SPONSORS</a></li> 
     <li><a href="#">DASHBOARD</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<div class="container-fluid" style="margin-top: 80px;"> 
    <div class="row"> 
    <div class="col-md-8" id="content"> 
     <div class="row" id="head-section"> 
     <div class="col-md-10 text-center"> 
      <h1 class="red">MEGA LEAGUE</h1> 
      <h4>FOOTBALL</h4> 
     </div> 
     <div class="col-md-2 text-right" style="padding-top: 20px;"> 
      <a href="#" class="red">EDIT DETAILS</a> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     fixed sidebar 
    </div> 
    </div> 
</div>

有了這個小JS：

$(function() { 
    var new_width = $('#content').width(); 
    $('#head-section').width(new_width); 
});

下面是一些相關的CSS：

#head-section { 
    position: fixed; 
    top: 80px; 
    padding-left: 50px; 
    padding-bottom: 20px; 
    padding-right: 50px; 
    box-shadow: 0 0 3px #000; 
    width: 100%; 
    background: #fff; 
    z-index: 2; 
}

什麼情況是這樣的：

正如你所看到的文字「固定側邊欄」正在落後於固定格（#head-section）。這是因爲JS將它的寬度設置爲1001px，根據chrome的檢查元素，這是錯誤的，它告訴我它只有900px。

我在做什麼錯，我該如何解決？

這裏的bootply：http://www.bootply.com/0xIGx67IzM

來源

2016-07-26 Mohammad Areeb Siddiqui

爲什麼你需要JS？ Bootstrap似乎在爲你處理？ –

@TahaPaksu nopes。 'head-section' div是'position：fixed'，我需要這個div是'col-md-8'的寬度，這是沒有JS的情況下不可能的，至少據我所知。 –

在固定的div後面創建一個虛擬的col-md-8，然後它會對我猜測的東西進行排序。 –

確定，所以有解決您的問題

JQuery的解決方案

雙向

將width更改爲outerWidth

$(function() { 
    var new_width = $('#content').outerWidth(); 
    $('#head-section').outerWidth(new_width); 
});

CSS解決方案

只需更換width:100%寬度width:inherit在＃頭部分

#head-section { 
    width: inherit; 
}

JQuery Example

CSS Example

來源

2016-07-26 07:23:34

#Areeb我剛更新了我的答案看看 –

非常感謝。 :) –

還有一件事，爲什麼沒有理由有垂直滾動條？ –

你是你#head-section寬度等於父的寬度，然後你添加填充的100像素到它（50像素到每邊）設置。

請參閱此鏈接的詳細信息：http://quirksmode.org/css/user-interface/boxsizing.html

有了標準定位（position:static;或position:relative;）如果你設置你的#head-section到{display:block;}（省略width:100%），將自動將其設置爲填充可用的100％水平空間，然後你的填充將推入，而不是出來。，

在這種情況下，但是因爲你使用position:fixed，你最簡單的解決辦法是使用現有的JavaScript和HTML（仍然您移除#head-section屬性width:100%），但在另一個容器元素包裹#head-section（也許爲了代碼可讀性，一個article？）

從那裏，你可以更新您的javascript來：

$(function() { 
    var new_width = $('#content').width(); 
    $('article').width(new_width); 
});

見琴：https://jsfiddle.net/znhws64p/1/

來源

2016-07-26 07:02:50

我刪除了填充，並將其設置爲「box-sizing：border-box;'但仍然沒有效果。 –

我加了'display：block;'也沒有發生。 –

當我刪除寬度：100％它沒有覆蓋的空間，而是收縮。 –

列的異常寬度

回答

相關問題