如何在Bootstrap 3

时间：2018-11-28 06:31:43

标签： javascript html css twitter-bootstrap-3 bootstrap-4

如何在Bootstrap 3中的可变文本下对齐按钮？如果全屏运行代码示例，您将看到三个按钮没有水平对齐。

当前行为：

enter image description here

我希望三个蓝色按钮在水平方向对齐。

  • 此外，在Xs和Sm缩放中，使按钮居中而不是左对齐将是极好的。我不想不得不使用<br>间隔符。

该如何解决？感谢所有的帮助和建议。

预期结果：

enter image description here

当前行为：代码示例（命中扩展代码段）

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

4 个答案:

答案 0 :(得分：2)

我对已经制作好的HTML结构使用了2个自定义类。\

    父div的

  1. 三节类

    2. 将

  2. text-sm-center 类添加到按钮父div。

以下是解决方案列表：

  

按钮对齐解决方案：

根据您的最长段落为段落提供最小高度。

.three-section p {
    min-height: 160px
  }
  

将按钮在xs和sm中居中对齐的解决方案：

编写一个类名称为 text-sm-center 的媒体查询，以将其应用于按钮代码div，并使段落高度自动变为不遵循前面给出的最小高度。 / p> 

@media (max-width: 767px) {
  // Align text to center.
  .text-sm-center {
    text-align: center;
  }
  .three-section p {
    min-height: inherit;
  }
}


.three-section p {
  min-height: 160px
}

@media (max-width: 1260px) {
  .three-section p {
  min-height: 200px
}
}

@media (max-width: 962px) {
  .three-section p {
    min-height: inherit;
  }
  .text-sm-center {
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="three-section">
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>



  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

答案 1 :(得分：1)

将最小高度添加到相应的p元素中。

尝试一下

p{min-height:160px;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

答案 2 :(得分：0)

.col-md-4
{
   display: flex;
   flex-direction: column;
   height:20em;
}

.col-md-4 > p
{
    flex:1 0 auto;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

答案 3 :(得分：0)

我为您的查询尝试了一些解决方案。 在类和CSS上进行一些调整

.row-eq-height {
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col-eq-height{display:flex;flex-flow: column;}
.mt-auto{margin-top:auto;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="row row-eq-height">
    <div class="col-md-4 col-eq-height">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

相关问题
最新问题