引导卡按钮和输入文本底部对齐 [英] bootstrap card buttons and input text aligned bottom

查看:43
本文介绍了引导卡按钮和输入文本底部对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试拥有一组引导卡,我希望它们都具有相同的大小,并在所有卡中的所有相同位置上放置卡中的项目,这意味着所有按钮和文本字段在每个卡上都应对齐一排纸牌.

我已经创建了三张卡片,

在每张卡中,我都有一个按钮和一个输入字段.

在阅读了一些答案之后,我发现了无论卡中有多少文字,如何将按钮放置在卡的底部,所以现在所有3张卡的按钮都处于同一级别.

但是对于文本字段而言,相同的方法不起作用,能否请您在此处检查代码,看看我在做什么错了:

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

https://jsfiddle.net/eliasRob/v7c0f9d2/6/


解决方案

Click me按钮中删除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">
</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">&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> 

i am trying to have a set of bootstrap cards and i want to have them all share the same size and locate the items in the cards at the same position across all cards, meaning all buttons and text fields to be aligned across each row of cards.

i have created three cards,

in each card i have a button and an input field.

after reading some answer here i found out how to position the buttons on the bottom of the card regardless of how much text there is in the card, so all 3 cards now have the buttons on the same level.

but the same approach is not working for text fields, can you please check the code here and see what is it i am doing wrong:

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

https://jsfiddle.net/eliasRob/v7c0f9d2/6/


解决方案

Remove mt-auto from the Click me button. Keep mt-auto only on the text field. Basically once you add mt-auto to an element(input field in this case), all the elements below it also get bottom aligned.

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

这篇关于引导卡按钮和输入文本底部对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆