Html 引导卡按钮和底部对齐的输入文本_Html_Css_Bootstrap 4

Html 引导卡按钮和底部对齐的输入文本

html css bootstrap-4

Html 引导卡按钮和底部对齐的输入文本,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在尝试拥有一组引导卡，我希望它们都具有相同的大小，并在所有卡中将卡中的项目定位在相同的位置，这意味着所有按钮和文本字段将在每行卡中对齐我制作了三张卡片在每张卡片上我都有一个按钮和一个输入字段在阅读了这里的一些答案后，我发现无论卡片中有多少文本，如何在卡片底部定位按钮，因此所有3张卡片现在都有相同级别的按钮但同样的方法不适用于文本字段，请检查这里的代码，看看我做错了什么：卡片布局公司名称最长单词

我正在尝试拥有一组引导卡，我希望它们都具有相同的大小，并在所有卡中将卡中的项目定位在相同的位置，这意味着所有按钮和文本字段将在每行卡中对齐

我制作了三张卡片

在每张卡片上我都有一个按钮和一个输入字段

在阅读了这里的一些答案后，我发现无论卡片中有多少文本，如何在卡片底部定位按钮，因此所有3张卡片现在都有相同级别的按钮

但同样的方法不适用于文本字段，请检查这里的代码，看看我做错了什么：


卡片布局
公司名称
最长单词



反向文本



资本化



&抄袭；2017-2018
特征








资源






关于

从

单击我

按钮中删除

mt auto

。仅在文本字段中保留

mt auto

。基本上，一旦您将

mt auto

添加到一个元素（本例中为输入字段），它下面的所有元素也会底部对齐


卡片布局
公司名称
最长单词



反向文本



资本化



&抄袭；2017-2018
特征








资源






关于

从

单击我

按钮中删除

mt auto

。仅在文本字段中保留

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">

  <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">&copy; 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>

<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 {
  background: transparent;
  border-top: 0px;
}