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

Question

在悬停时如何在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"/>
<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

编辑：看来您正在使用Bootstrap4。您的问题是在Bootstrap中，.col-md-2类的padding-left和padding-right为15px。为了使您的链接延伸到整个路径，您需要覆盖它。您可以通过几种方法来做到这一点，但是这就是我的方法。我将向您创建的div直接添加一个内联样式，并将<div class="col-md-2 sidebar">更改为<div class="col-md-2 sidebar" style="padding-left:0px;padding-right:0px">

Answer 2

我为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 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>