如何从div的开头到末尾建立链接

Question

如何使我的链接跨过-md-2是什么时候是:悬停？

我的链接的外观：

​

我想要的链接的外观：

​

我的代码：

​

.sidebar {
        background-color: lightgray;
    }
      
    .sidebar a {
        display: block;
        color: black;
        padding: 16px;
        text-decoration: none;
    }
    
    .sidebar a.active {
        background-color: #4CAF50;
    }
      
    .sidebar a:hover:not(.active) {
        background-color: #555;
        color: white;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 sidebar">
            <a>Link 1</a>
            <a>Link 2</a>
            <a>Link 3</a>
        </div>  
        <div class="col-md-10">

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

​

Answer 1

我为padding:0 !important;添加了.sidebar

​

.sidebar {
  background-color: lightgray;
  padding: 0 !important;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #4CAF50;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 sidebar">
      <a>Link 1</a>
      <a>Link 2</a>
      <a>Link 3</a>
    </div>
    <div class="col-md-10">

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

​

Answer 2

编辑:看起来你在使用引导程序4。你的问题是，在Bootstrap中，.col-md-2类有左填充和右填充15 It。为了让你的链接延伸到整个过程，你需要覆盖它。有几种方法你可以做到这一点，但以下是我如何做到这一点。我将直接向您创建的div添加内联样式，并将<div class="col-md-2 sidebar">更改为<div class="col-md-2 sidebar" style="padding-left:0px;padding-right:0px">。

Answer 3

请遵循这个结构。最好在<div class="sidebar">中添加.col-md-2行，而不是这样。检查我的代码和演示。

​

.sidebar {
    background-color: lightgray;
}
      
.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
}
    
.sidebar a.active {
    background-color: #4CAF50;
}
      
.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <div class="sidebar">
            <a>Link 1</a>
            <a>Link 2</a>
            <a>Link 3</a>
        </div>
    </div>
    <div class="col-md-10"></div>
  </div>
</div>

​