Bootstrap: не удается правильно отделить кнопку от тела панели

Я новичок в Bootstrap и Html. В настоящее время я пытаюсь отделить мой Кнопка "Добавить человека" от тела панели, но я не знаю, как этого добиться. Ниже Скриншот моей проблемы и текущие коды:

<div class = "panel panel-primary">
    <div class = "panel-heading clearfix">
        <div class = "panel-heading">
            Manage Person
        </div>
    </div>
</div>
<div class = "btn-group pull-right">
    <a asp-action = "Create" asp-controller = "Persons" class = "btn btn-primary btn-group-sm">
        Add Person
    </a>
</div>

<div class = "panel-body">
    <div class = "row">
        <div class = "col-md-12">
            <table class = "table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Gender</th>
                        <th>Height</th>                    
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Rachel</td>
                        <td>25</td>
                        <td>Female</td>
                        <td>175cm</td>
                    </tr>
                    <tr>
                        <td>Thomas</td>
                        <td>15</td>
                        <td>Male</td>
                        <td>165cm</td>
                    </tr>
                    <tr>
                        <td>Jared</td>
                        <td>40</td>
                        <td>Male</td>
                        <td>195cm</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Какую версию начальной загрузки вы используете?

— 11.06.2018 09:18

@NanditaAroraSharma Bootstrap 3

— 11.06.2018 09:26

ОК. Тогда проверьте мой ответ сейчас. Обновил его в соответствии с загрузкой 3

— 11.06.2018 09:27

javascript html twitter-bootstrap

11.06.2018 09:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Используйте clearfix div, как предложено ниже. И добавляем margin-top: 10px; на panel-body

  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class = "panel panel-primary">
    <div class = "panel-heading ">
        <div class = "panel-heading">
            Manage Person
        </div>
    </div>
</div>
<div class = "btn-group pull-right" style = "float: right;">
    <a asp-action = "Create" asp-controller = "Persons" class = "btn btn-primary btn-group-sm">
        Add Person
    </a>
</div>
<div class = "clearfix"></div>

<div class = "panel-body" style = "margin-top: 10px;">
    <div class = "row">
        <div class = "col-md-12">
            <table class = "table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Gender</th>
                        <th>Height</th>                    
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Rachel</td>
                        <td>25</td>
                        <td>Female</td>
                        <td>175cm</td>
                    </tr>
                    <tr>
                        <td>Thomas</td>
                        <td>15</td>
                        <td>Male</td>
                        <td>165cm</td>
                    </tr>
                    <tr>
                        <td>Jared</td>
                        <td>40</td>
                        <td>Male</td>
                        <td>195cm</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Привет, Нандита, могу я узнать, почему вы меняете позицию класса .clearfix?

— 11.06.2018 09:35

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

— 11.06.2018 09:38

11.06.2018 09:19

<div class = "btn-group pull-right">
    <a asp-action = "Create" style = "margin-bottom:5px" asp-controller = "Persons" class = "btn btn-primary btn-group-sm">
        Add Person
    </a>
</div>

вы можете использовать margin-bottom.

11.06.2018 09:26

Это был бы мой способ исправить это: