首页 文章

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

提问于
浏览 次
0

如何在col-md-2上 Build 链接时：a？

我的链接外观：

我想要的链接外观：

我的代码：

.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>
html css bootstrap-4

3 回答

  • 0

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

    .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>
    回复于
  • 0

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

    回复于
  • 0

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

    .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>
    回复于

相关问题