Как показать под кнопки на навеске вокруг элемента - PullRequest
Новая
       10

Как показать под кнопки на навеске вокруг элемента

0 голосов
/ 22 апреля 2020

Я делаю вид дерева категорий для панели администратора, и я хочу показать на кнопке несколько вспомогательных кнопок вокруг элемента. Как я могу сделать это?

Я хочу что-то вроде этого

Это мой вид дерева категорий

1 Ответ

1 голос
/ 22 апреля 2020

Ваш html должен быть 

        <div class="button-container text-center">
           <button class="btn btn-default btn-circle soo top"><i class="fa fa-trash"></i></button>         
           <button id="subbtnshow" class="btn btn-outline-primary">Help me</button>
           <button class="btn btn-default btn-circle soo foo"><i class="fa fa-edit"></i></button>
           <button class="btn btn-default btn-circle soo bottom"><i class="fa fa-plus-circle"></i></button>      
        </div>

и css должен быть 

.button-container{
  position:relative;  
  padding:35px;
  width:fit-content;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
  border:1px solid;
}

.soo {
  position: absolute;
  display: none;
  font-size: 20px;
  padding: 0px;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
}

.soo.top{
  top:0px;
}

.soo.bottom{
  bottom:0px;
}


.foo {
  left:initial;
  margin-top:auto;
  margin-bottom:auto;
  top:0px;
  bottom:0px;
}
...