Bootstrap Создать большую кнопку - PullRequest
Новая
       7

Bootstrap Создать большую кнопку

0 голосов
/ 28 июня 2018

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

как на картинке ниже

https://i.stack.imgur.com/xEBwc.png

Ответы [ 4 ]

0 голосов
/ 28 июня 2018

Если вы просто хотите большую кнопку, вы можете использовать класс 'btn-l'. 

<button type="button" class="btn btn-primary btn-lg">Large button</button>

Если вы хотите изменить ширину кнопки при смене экрана, вы можете использовать утилиты flexbox , здесь я использовал 'd-flex' и 'flex-grow-1'. 

.bd-highlight{
  background:red;
  border: 1px solid blue;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 flex-grow-1 bd-highlight">Third flex item</div>
</div>
0 голосов
/ 28 июня 2018

Используйте class="row" до wrap div и col-xs-4 (или col-md-4 ...), чтобы div, который оборачивает кнопку ...

Используйте btn-lg, а также собственный css для переопределения определения начальной загрузки ...

Я использую width:100%;, потому что вам нужны большие кнопки (как вы сказали ...) 

    .btn-default{
      width:100%;
      background-color:orange!important;
      margin:5px!important;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
    <div class="container">
     <div class="row">
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
         <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
     </div>
    </div>
0 голосов
/ 28 июня 2018

использовать класс начальной загрузки .btn-lg и .btn-block 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
0 голосов
/ 28 июня 2018

Здесь я привел пример с тремя большими кнопками:

HTML: 

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
</body>

CSS: 

.btn
{
  width:250px;
}

Надеюсь, это то, что вам нужно.

...