Question

我试图在navbar中创建此bootstrap 4：

但我真的不知道如何：/，有人可以提出任何建议吗？！看一下navbar左右两侧的线条，在中间的图像后面，这些线条是我想要的，在这种情况下，我需要图像在中心，其他链接在右边和它的左边。
欢迎任何回应♥。

Answer 1

只是为了给你一个想法，你可以使用下面的攻击类在文本的任一侧画一条线......

/* strike: text inside a line */
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #d8d8d8;
}

.strike > span:before {
    right: 100%;
    margin-right: 8px;
}

.strike > span:after {
    left: 100%;
    margin-left: 8px;
}

<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col-4">
    <div class="strike">
        <span>some text1</span>
    </div>
  </div>
  <div class="col-4">
    <div class="strike">
        <span>some text2</span>
    </div>
  </div>
  <div class="col-4">
    <div class="strike">
        <span>some text3</span>
    </div>
  </div>
</div>

bootstrap自定义导航栏与行

1 个答案: