Question

我在ContentArea中显示3个Bootstrap列时遇到问题。当我使用Developer工具时，我可以找到它们，它们位于ContentArea的底部，看不见。我尝试添加top属性，甚至是margin-top属性，但无法将这些列移到ContentArea中的视图中。

有人能指出我哪里出错了吗？

＆＃13;

$(document).ready(function () {
    $('#menu-toggle').toggleClass('menu-hidden');

    $('#menu-toggle').on('click', function () {
        //alert();
        $('#SidebarWrapper').toggleClass('menu-hidden');
        $('#ContentArea').toggleClass('content-grew');
        $('#SubCategories').toggleClass('slide-left');

    });
});

＆＃13;

body {
}
#TheLayoutContainer {
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
    border:1px solid black;
    background-color:pink;
    left:0px;
}

#menu-toggle {
    
}

#SidebarWrapper {
    width:200px;
    height:100%;
    margin-top:0;
    margin-left:0;
    position:fixed;
    z-index:2000;
    background-color:black;
    transition:1s;
}

#SidebarWrapper.menu-hidden {
    width:50px;
    transition:1s;
}


#ContentArea {
    position: relative;
    height: 100%;
    background-color: purple;
    z-index: 2000;
    left: 325px;
    margin-top:0px;
    transition:1s;
    padding-right:20px;
}

#ContentArea #SubCategories {
    margin-left:-125px;
    width:125px;
    height:100%;
    border:1px solid #72cad3;
    background-color:#72cad3;
}

#SubCategories.slide-left {
    margin-left:-75px;
    width:125px;
    height:100%;
    border:1px solid #72cad3;
    background-color:#72cad3;
}

#ContentArea.content-grew {
    height: 100%;
    left: 175px;
    transition:1s;
}

#HeaderControlMenu {
    height:45px;
    width:100%;
    background-color:yellow;
    top:0px;
    position:fixed;
    z-index:2000;
    left:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div id="HeaderControlMenu">
        <button id="menu-toggle" class="btn btn-success">Click</button>
    </div>
</div>
<div id="TheLayoutContainer">

    <div id="SidebarWrapper">

    </div>

    <div id="ContentArea">
        <div id="SubCategories">

        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
        </div>
    </div>

</div>

＆＃13;

Answer 1

除了@Temani Afif所说的，你需要将父（包含行的元素）包含在具有类container的元素中。

<div class="container">
<div class="row">
    <div id="HeaderControlMenu">
        <button id="menu-toggle" class="btn btn-success">Click</button>
    </div>
</div>
<div class="row">
<div id="TheLayoutContainer">

    <div id="SidebarWrapper">

    </div>

    <div id="ContentArea">
        <div id="SubCategories">

        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">A</div>
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">B</div>
            <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4" style="border:1px solid green">C</div>
        </div>
    </div>

</div>
</div>
</div>

Here is a fiddle

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

因为其他答案和评论都没有提及代码中的所有错误，所以我会在答案中这样做：

不要使用＆＃34;裸体＆＃34; Bootstrap中的行。请改为：如果您需要全角容器，请使用div（或其他合适的元素，如section等）与类.container-fluid。否则，使用类.container的div并将您的行放在该容器中。
引导程序.row必须始终至少包含一个Bootstrap列（.col-*），并且所有内容必须位于列内。不要将任何内容直接放入.row。
.col-xs-*类不再存在于Bootstrap 4中（不再存在）。请改用.col-*。
将col-lg-12 col-md-12 col-sm-12 col-xs-12替换为col-12，因为这样做的工作完全相同。（因为Bootstrap 4是＆＃34;移动优先＆＃34;）
将col-md-4 col-lg-4 col-sm-4 col-xs-4替换为col-4，因为这样做的工作完全相同。

附注：您可以将一些内容直接放入Bootstrap .container或.container-fluid，即不使用Bootstrap行和列。但是，这仅在少数特殊情况下才有意义，因为通常如果您这样做，您的内容就无法响应。此规则的例外情况是Bootstrap navbars和jumbotrons。

在Bootstrap列的定位方面存在问题

2 个答案: