0
赤でマークされた領域を灰色に変えたいと思っています。私はたくさんのことを試みましたが、私は困惑しています。選択した領域の背景を灰色にする方法
私はバックグラウンドを明るい灰色にしたいが、トップバーやナビゲーションを変更したくない。ここで 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>
あなたが提供することができます任意の助けを事前にありがとうございます！