引导卡按钮和输入文本底部对齐
我正在尝试拥有一组引导卡，并且我希望它们都具有相同的大小，并在所有卡中的所有相同位置上放置卡中的项目，这意味着所有按钮和文本字段在每个卡上都对齐一排纸牌。
我已经创建了三张卡片，
在每张卡中，我都有一个按钮和一个输入字段。
在阅读了一些答案之后，我发现无论卡片中有多少文字，如何将按钮放置在卡片底部，所以现在所有3张卡片的按钮都处于同一级别。
但是对于文本字段而言，相同的方法不起作用，能否请您在此处检查代码，看看我在做什么错了：
import java.util.Scanner;
class Test {
public static void main(String args[]) {
Scanner scan = new Scanner(System.in);
System.out.println("Enter the String: ");
char s[] = scan.nextLine().toCharArray();
int seqLen = 3;
int cnt = 1;
for (int i = 1; i < s.length; i++) {
if (s[i] == s[i - 1]) {
cnt++;
}
if((cnt==seqLen)&&((s[i] !=s[i - 1] || i == s.length)){
if(cnt == seqLen)
{
for(int j= 0; j<seqLen; j++)
{
System.out.println(s[i - 1]);
}
}
cnt=1;
}
}
scan.close();
}
}
https://jsfiddle.net/eliasRob/v7c0f9d2/6/
4 个答案:
答案 0 :(得分：2)
由于您已经将card-body设置为d-flex和flex-column，因此唯一要做的就是设置justify-content: space-between;并包装/分组所有想要的内容放在底部并带有<div> / <section>等。
<div class="card-body d-flex flex-column justify-content-between">
<p class="card-text">...</p>
<div>
<input type="text" class="form-control" />
<button type="button" class="btn btn-primary">Click Me!</button>
</div>
</div>
答案 1 :(得分：1)
从mt-auto按钮中删除Click me。仅在文本字段上保留mt-auto。基本上，将mt-auto添加到元素（在这种情况下为输入字段）后，其下方的所有元素也将底部对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto" id="cell1Input">
<input type="button" class="btn btn-primary" name="1Button" value="Click Me!" id="cell1Button" />
<br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto" id="cell2Input">
<input type="button" class="btn btn-primary" name="2Button" value="Click me!" id="cell2Button">
<br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial letters in each word</p>
<input type="text" name="3Input" class="mt-auto" id="cell3Input">
<input type="button" class="btn btn-primary" name="3Button" value="Click me!" id="cell3Button">
<br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
答案 2 :(得分：0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Card Layout</title>
<link href="https://getbootstrap.com/docs/4.0/examples/pricing/pricing.css" rel="stylesheet">
<style type="text/css">
.inputButtontopAlign{
position: absolute;
bottom: 82px;
width: 86%;
-webkit-appearance: textfield;
}
</style>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Longest Word</h4>
</div>
<!-- i have three cards below, each one has a button and an input field -->
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Longest Word</h5> -->
<p class="card-text" style="font-size: 100%">a Function to find and display the longest word in a phrase, namely the first longest word in case multiple equal size words are present </p>
<input type="text" name="1Input" class="mt-auto inputButtontopAlign" id="cell1Input">
<input type="button" class="btn mt-auto btn-primary" name="1Button" value="Click Me!" id="cell1Button"></input>
</br>
<span id="1FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Reverse Text</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Reverse Text</h5> -->
<p class="card-text" style="font-size: 100%">a Function to reverese letters in each word </p>
<input type="text" name="2Input" class="mt-auto inputButtontopAlign" id="cell2Input">
<input type="button" class="btn mt-auto btn-primary" name="2Button" value="Click me!" id="cell2Button">
</br>
<span id="2FunctionResult"></span>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Capitalize</h4>
</div>
<div class="card-body d-flex flex-column">
<!-- <h5 class="card-title" style="font-size: 200%">Capitalize</h5> -->
<p class="card-text" style="font-size: 100%">a Function to split words and capitalize all initial letters in each word</p>
<input type="text" name="3Input" class="mt-auto inputButtontopAlign" id="cell3Input">
<input type="button" class="btn mt-auto btn-primary" name="3Button" value="Click me!" id="cell3Button">
</br>
<span id="3FunctionResult"></span>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
答案 3 :(得分：0)
使用页脚，它已经为您完成了所有设置。
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Title goes here</h4>
<p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
</div>
<div class="card-footer text-muted mx-auto">
<button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
</div>
</div>
然后，您可以选择设置card-footer元素的样式。
.card-footer {
background: transparent;
border-top: 0px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？