Блог

Главная - Вопросы по программированию - Начальная загрузка 5: выровняйте значок и текст внутри кнопки

Начальная загрузка 5: выровняйте значок и текст внутри кнопки

#javascript #css #twitter-bootstrap #bootstrap-5

Вопрос:

Я хочу выровнять значки и текст в модальном теле:

 <div class="modal-body">
    <div class="d-grid gap-2" id="someButtons">
    </div>
</div>

Вот как я добавляю кнопки:

 testItems.forEach(function ( item ) {
    let btn = document.createElement("a");
    btn.setAttribute("role", "button");
    btn.innerHTML = `<i class="fas fa-plus-circle"></i> ${item}`;
    ["btn", "btn-primary"].forEach(item => btn.classList.add(item)); 
    btnsDiv.appendChild(btn)
});

Я также попробовал это:

 let delBtn = document.createElement("a");
    delBtn.setAttribute("role", "button");
    ["btn", "btn-danger"].forEach(item => delBtn.classList.add(item)); 
    delBtn.innerHTML = `<p class="text-start"><i class="fas fa-minus-circle"></i></p>`
    btnsDiv.appendChild(delBtn)

введите описание изображения здесь

могу ли я достичь этого только с помощью bootstrap5?

Ответ №1:

Вы были близки с кнопкой удаления, .text-start это ключ, но он должен быть применен к кнопкам. Вы также можете удалить <p> . В следующем фрагменте я также добавил .me-2 значки, чтобы дать им некоторое правое поле, соответствующее расстоянию, которое вы имеете в желаемом выходном изображении.

 let testItems = ['one', 'two', 'three']
let btnsDiv = document.getElementById('someButtons')
testItems.forEach(function(item) {
  let btn = document.createElement("a");
  btn.setAttribute("role", "button");
  btn.innerHTML = `<i class="fas fa-plus-circle me-2"></i> ${item}`;
  ["btn", "btn-primary", "text-start"].forEach(item => btn.classList.add(item));
  btnsDiv.appendChild(btn)
});
let delBtn = document.createElement("a");
delBtn.setAttribute("role", "button");
["btn", "btn-danger", "text-start"].forEach(item => delBtn.classList.add(item));
delBtn.innerHTML = `<i class="fas fa-minus-circle me-2"></i> some text`
btnsDiv.appendChild(delBtn) 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">


<div class="modal-body">
  <div class="d-grid gap-2" id="someButtons">
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Ответ №2:

 const btnsDiv = document.getElementById("someButtons");
const testItems = ["Hi","Hello"];

testItems.forEach(function ( item ) {
    let btn = document.createElement("a");
    btn.setAttribute("role", "button");
    btn.innerHTML = `<i class="fas fa-plus-circle me-2"></i> ${item}`;
    ["btn", "btn-primary", "text-start"].forEach(item => btn.classList.add(item)); 
    btnsDiv.appendChild(btn);
}); 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="modal-body">
    <div class="d-grid gap-2" id="someButtons">
    </div>
</div>

Ответ №3:

Добавьте начальную загрузку d-flex с justify-content-start помощью и align-items-center классов к вашим кнопкам, это сделает их гибкими и добавит набор justify-content свойств для запуска содержимого кнопки.

Если вы настроили объект с именами в качестве ключей, вы можете вложить другой объект с типом кнопок и значком в качестве пар ключ/значение и ссылаться на них в for ... in цикле, используя Object.keys(btnObj[i] и Object.keys(btnObj[i]. 

 const btnObj = {
  'one': {
    'fa-plus-circle': 'btn-primary'
  },
  'two': {
    'fa-plus-circle': 'btn-primary'
  },
  'three': {
    'fa-plus-circle': 'btn-primary'
  },
  'some text': {
    'fa-minus-circle': 'btn-danger'
  }
}

for (let i in btnObj) {
  let btn = document.createElement("a");
  btn.setAttribute("role", "button");
  btn.innerHTML = `<i class="fas ${Object.keys(btnObj[i])}"></i>amp;nbsp;${i}`;
  ["btn", `${Object.values(btnObj[i])}`, "d-flex", "justify-content-start", "align-items-center"].forEach(item => btn.classList.add(item));
  document.getElementById('someButtons').appendChild(btn)
}; 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">


<div class="modal-body">
  <div class="d-grid gap-2" id="someButtons">
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Ответ №4:

Вы можете попробовать добавить класс «текстовый запуск», для получения дополнительной информации см.:

https://getbootstrap.com/docs/5.1/utilities/text/

Метки: