Как выровнять элементы в заголовке карты начальной загрузки 4 - PullRequest
Новая
       1

Как выровнять элементы в заголовке карты начальной загрузки 4

1 голос
/ 14 октября 2019

У меня есть карта начальной загрузки 4, и я хочу совместить h3 и группу ввода друг с другом.

Я пытался добавить float-right в группу ввода, но это не сработало. Я также попытался сделать встроенный блок h3 и input-group, но он все еще не работает. PS Я использовал встроенную таблицу стилей. 

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="input-group input-group-sm col-sm-3" style="inline-block">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

Ответы [ 3 ]

1 голос
/ 14 октября 2019

надеюсь, это поможет вам. 

  <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"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

<div class="card-header d-flex align-items-center">
    <h3 class="card-title">Product List</h3>
    <div class="input-group input-group-sm col-sm-3 ml-auto">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>
1 голос
/ 14 октября 2019 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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">
</head>
<body>
  <section class="card-header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <h3 class="card-title" style="inline-block">Product List</h3>
        </div>
        <div class="col-sm-6">
          <div class="input-group input-group-sm" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Просто сохраните .card-header в секции и оберните title и .input-group в .row > .col-*-*

0 голосов
/ 14 октября 2019

Просто добавьте класс row перед вашим input-group классом. Потому что вы взяли col-sm-3 с input-group, и это добавляет отступ в 15 пикселей слева и справа к элементу. Добавив класс row, вы добавите минус поля перед вашей группой ввода, и она выровняет вашу группу ввода с h3. 

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="row">
        <div class="input-group input-group-sm col-sm-3" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...