#javascript #html #css #bootstrap-4
Вопрос:
Кнопки значков должны иметь ту же ширину, что и динамическая таблица с правой стороны, но вместо этого они слегка переполняются. Приблизительный желаемый результат / выход по току . Прежде чем вставить блок кода,вот некоторые из вещей, которые я уже пробовал:
- Установка отступов,отступов снизу,отступов в строке,полей,полей в строке до 0 пикселей или даже отрицательных значений на полях.
- Уменьшение высоты строки , высоты,максимальной высоты или установка ее в соответствие-содержимое/нет.
- Удаление пробелов форматирования между кнопками и значками в HTML, чтобы все они находились в одной строке кода.
- Использование классов py-0,px-0 и pz-0 из начальной загрузки
- Использование отображения:сгибание , выравнивание элементов:пробел, добавление направления сгиба: столбец
Тем не менее, вот мой код:
.actions-column { padding: 0px; } .values-column { padding-right: 0px; } lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"gt; lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"gt;lt;/scriptgt; lt;div class="row"gt; lt;div class="col-md-11 values-column"gt; lt;div class="row-lg containerRating list-group" id="userActCourses"gt;lt;/divgt; lt;/divgt; lt;div class="col-md-1 actions-column"gt; lt;button type="button" class="btn btn-default btn-floating btn-pure"gt; lt;i id="addActIcon" data-index=-1 class="fa fa-plus action-icon add" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure" disabledgt; lt;i class="fa fa-pencil action-icon edit" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure" disabledgt; lt;i class="fa fa-trash action-icon delete" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure" disabledgt; lt;i id="addCompleteIcon" class="fa fa-check-square-o action-icon complete" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;/divgt; lt;/divgt; Обновить
Что сработало для меня, так это добавление пользовательского класса CSS и уменьшение размера кнопки вручную.
.actions-column { padding: 0px; } .values-column { padding-right: 0px; } .customButton{ height:3rem; /*Lower than the default size in bootstrap*/ } lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"gt; lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"gt;lt;/scriptgt; lt;div class="row"gt; lt;div class="col-md-11 values-column"gt; lt;div class="row-lg containerRating list-group" id="userActCourses"gt;lt;/divgt; lt;/divgt; lt;div class="col-md-1 actions-column"gt; lt;button type="button" class="btn btn-default btn-floating btn-pure customButton"gt; lt;!-HERE!!!-gt; lt;i id="addActIcon" data-index=-1 class="fa fa-plus action-icon add" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure customButton" disabledgt;lt;!-HERE!!!-gt; lt;i class="fa fa-pencil action-icon edit" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure customButton" disabledgt;lt;!-HERE!!!-gt; lt;i class="fa fa-trash action-icon delete" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;button type="button" class="btn btn-default btn-floating btn-pure customButton" disabledgt;lt;!-HERE!!!-gt; lt;i id="addCompleteIcon" class="fa fa-check-square-o action-icon complete" aria-hidden="true"gt;lt;/igt; lt;/buttongt; lt;/divgt; lt;/divgt;
Ответ №1:
Bootstrap разработан, чтобы быть мобильным в первую очередь, поэтому выравнивание по вертикали может быть сложным. возможно, вам захочется изучить возможность использования классов flex
Комментарии:
1. да, к сожалению, это, похоже, не влияет на это, как упоминалось в последнем пункте 🙁
2. поскольку вы используете bootstrap, предпочтительнее не использовать переопределения css. попробуйте d-flex и flex-строку вокруг вашего первого div и еще один гибкий столбец d-flex вокруг ваших кнопок
3. кроме того, может быть проще сделать текстовую область слева выше, чем пытаться разместить кнопки в вертикальном пространстве текстовой области.
4. опция d-flex, о которой вы сказали, не работала в данном конкретном случае, но она очень интересна, и я рассмотрю ее в будущем!
5. Что сработало для меня , так это просто сделать эти конкретные 4 кнопки меньше, но я подумаю над тем, что вы сказали, если я сделаю еще несколько из них с нуля, ха-ха-тай!