Bootstrap 4-кнопочная группа реагирует без добавления пользовательского css - PullRequest
0 голосов
/ 13 июля 2020

У меня есть div с группой кнопок.

Вот код:

<div id="main"><!-- This is 100% width and no passing or margin -->

    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-justified" role="group">

      <div class="btn-group" role="group">
        <button class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> Add</button>
      </div>

      <div class="btn-group" role="group">
        <button class="btn btn-primary btn-lg"><i class="fa fa-download"></i> Import</button>
      </div>

      <div class="btn-group" role="group">
        <button class="btn btn-primary btn-lg"><i class="fa fa-trash"></i> Delete</button>
      </div>

      <div class="btn-group" role="group">
        <button class="btn btn-primary btn-lg"><i class="fa fa-save"></i> Save</button>
      </div>

      </div>
    </div>

</div>

Эта проблема в том, что мне нужны эти кнопки:

1. Be the same size 
2. Take up 100% of the parent div inline

На данный момент я могу установить только 3 кнопки, но мне нужно исправить 4.

Я мог бы разделить 100 на 4 и указать размер кнопок, но поскольку я использую Bootstrap 4, есть ли способ чтобы сделать это, используя 4 собственных класса Bootstrap, или если вы не можете сделать это, просто используя bootstrap 4 класса, как мне лучше всего это сделать?

1 Ответ

0 голосов
/ 13 июля 2020

Используйте это в своем индексе. html файл

<!doctype HTML>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRe3js3W69CrGF8kKXvvmYtT4zNGqicXRjvuAnmmbvPZXc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div id="main"><!-- This is 100% width and no passing or margin -->

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-justified bg-primary" role="group" style="width: 100%;">
    <div class="row">
      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-plus"></i> Add</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-download"></i> Import</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-trash"></i> Delete</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-save"></i> Save</button>
      </div>
    </div>

  </div>
</div>

</div>
<script src="jquery/jquery.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...