Bootstrap 4: фиксированная ширина столбцов + остаток строки в нижнем колонтитуле карты - PullRequest
Новая
       6

Bootstrap 4: фиксированная ширина столбцов + остаток строки в нижнем колонтитуле карты

0 голосов
/ 19 сентября 2018

У меня есть карта начальной загрузки-4 с нижним колонтитулом.Внутри нижнего колонтитула есть поле ввода (фиксированная ширина) и кнопка.Кнопка должна расшириться до ширины: 100% - ширина поля ввода.

https://jsfiddle.net/aq9Laaew/224543/

input {
  width:3rem;
}

<div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="col-auto">
        <input type="text" value="1" />      
      </div>
      <div class="col-12">
        <button>
          Rest of width
        </button>
      </div>
  </div>
</div>

Как это сделать?Как вы можете видеть на скрипке, я попытался использовать col-auto, но это разбивает строку с кнопкой input + на 2 строки.

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

Сначала добавьте класс d-flex к card-footer, сделав его флекс-контейнером, плюс добавив следующий CSS, чтобы решить эту проблему: 

.card-footer button { flex: 1 }

Сгиб: 1 заставляет кнопку брать оставшиесяпробел. 

input {
  width:3rem;
}

button {
  flex: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 
 
 <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer d-flex">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>
0 голосов
/ 19 сентября 2018
  • Для этого лучше использовать столбцы начальной загрузки.(начальная загрузка 4)
  • Также вы можете использовать свойство css calc ().См. Пример ниже. 

/*CSS for Example 1*/
.ex-1 input {
  float: left;
  width: 3rem;
}

.ex-1 button {
  display: block;
  float: left;
  width: calc( 100% - 3rem);
}
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
   
  <!-- Example 1 -->
  <div class="card ex-1">
    <div class="card-body">
      <h5 class="card-title">Exxample 1</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>
  
  <!-- Example 2 -->
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Example 2</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="row">
        <div class="col-2 pr-0">
          <input type="text" class="form-control" value="1">
        </div>
        <div class="col-10 pl-0">
          <button class="p-1 w-100">Rest of width</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 19 сентября 2018

Вы можете использовать свойство css width: calc(100% - "width_your_button");

Или пример начальной загрузки: 

<div class="card-footer">
      <div class=" col-sm-2 col-xs-2 col-md-2 col-lg-2">
        <input type="text" value="1" />      
      </div>
      <div class=" col-sm-10 col-xs-10 col-md-10 col-lg-10">
        <button>
          Rest of width
        </button>
      </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...