为什么我的内容没有转到屏幕的右侧？答案

【问题标题】：Why my content does not go to the right side of the screen?为什么我的内容没有转到屏幕的右侧？
【发布时间】：2022-11-19 07:16:02
【问题描述】：

我正在设计一个管理仪表板。我想通过使用 bootstrap 网格系统将页面分成两部分。一部分（屏幕的 3/12）包括一个导航，这没问题，但我想将一些内容放入屏幕的 9/12，并且出于某种原因它也出现在导航中。我希望第一张图片中的文字“bruh”位于第二张图片中的紫色位置。

the current situation how I want the things to be

这是我的 html 代码：

      <div class="container-fluid">
        <div class="row">
            <div>
                <div class="col-sm-3 col-md-2 awesome_border">
                    <ul class="nav flex-column gotodown">
                        <li class="nav-item coolbox">
                        <a class="nav-link active" aria-current="page" href="#">Stats</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Graphs</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Users</a>
                        </li>
                    </ul>

                    <br>

                    <ul class="nav flex-column gotodown boxbox">
                        <li class="nav-item coolbox">
                        <a class="nav-link active" aria-current="page" href="#">Reports</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Revenue</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Countries</a>
                        </li>
                        <li class="nav-item coolbox">
                            <a class="nav-link" href="#">Spammers</a>
                        </li>
                    </ul>
                </div>    
            </div>
            <div class="col-sm-9 col-md-10">
                <ul class="nav flex-column">
                    <li class="nav-item"><h2>Bruh</h2></li>
                </ul>
            </div>
        </div>
      </div>

这是我的 CSS：

body{
    font-family: 'Rosario', sans-serif;
    min-height: max-content;
}

.gotodown{
    margin-top: 80px;
    margin-left: 25px;
}

.coolbox{
    padding: 0.2em;
}

.boxbox{
    padding-top: 2%;
    margin-bottom: 100px;
}

.awesome_border{
    border-style: solid;
    border-color: red;
}

我尝试在中编写我的内容，希望它出现在屏幕的右侧，但它出现在左侧的导航栏中。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你有一个不必要的div，你关闭row div的时间太早了。

这对我有用：

   <div class="container-fluid">
        <div class="row">
                <div class="col-sm-3 col-md-2 awesome_border">
                    <ul class="nav flex-column gotodown">
                        <li class="nav-item coolbox">
                        <a class="nav-link active" aria-current="page" href="#">Stats</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Graphs</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Users</a>
                        </li>
                    </ul>

                    <br>

                    <ul class="nav flex-column gotodown boxbox">
                        <li class="nav-item coolbox">
                        <a class="nav-link active" aria-current="page" href="#">Reports</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Revenue</a>
                        </li>
                        <li class="nav-item coolbox">
                        <a class="nav-link" href="#">Countries</a>
                        </li>
                        <li class="nav-item coolbox">
                            <a class="nav-link" href="#">Spammers</a>
                        </li>
                    </ul>
                </div>    
        
            <div class="col-sm-9 col-md-10">
                <ul class="nav flex-column">
                    <li class="nav-item"><h2>Bruh</h2></li>
                </ul>
            </div>
        </div>
      </div>

现在你只需要实现一些样式来让它按照你想要的方式定位。

【讨论】：