我想把红色标记的区域改为灰色，我尝试了很多东西，但我很难过，任何帮助都会非常感激！
基本上我想让背景变成浅灰色但不会改变顶部栏或导航。 Image
以下是代码：
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<a href="#"><button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button></a>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
提前感谢您提供任何帮助！
答案 0 :(得分：1)
您需要编写或覆盖bootsrap中的规则。
为要定位的每个div创建选择器。
示例：
<h2>
<span style="font-weight: normal;">
<a class="previousinstallment" href="http://www.nickfisherman.com/2016/02/the-odds-eleven-part-i.html" title="Previous Installment"><</a>
<a class="nextinstallment" href="http://www.nickfisherman.com/2016/03/the-odds-forty-two-part-iii.html" title="Next Installment">></a>
<a class="entirestory" href="http://www.nickfisherman.com/p/the-odds-entire-story.html" title="Entire Story">Entire Story</a>
</span></h2>答案 1 :(得分：0)
您正在寻找的是背景色css属性。 你可以给他一个颜色。 Personaly我喜欢＃939393。
所以你可以尝试添加：
Hello World!标记为style="background-color:#93939;
<main>
答案 2 :(得分：0)
你有一个包含它们的div吗？...我可以看到你擅长这个，所以我希望你试着找到类名并设置background-color =＆＃34; someShadeOfgrey＆＃34;。 ..你可以用＆lt;风格＆GT;标签或CSS文件:)）或者只是用＆lt;来实现它。 DIV＆GT;标签
<div class="myClass" style="background-color:grey;">