在下拉表单中对齐文本 Bootstrap答案

【问题标题】：Align text in a drop-down form Bootstrap在下拉表单中对齐文本 Bootstrap
【发布时间】：2018-05-30 16:05:53
【问题描述】：

我在一行中有一个内联表单，其中包含一个电子邮件表单和一个下拉表单。调整大小后，下拉菜单上的文字失去了原来的位置（文字在左边，箭头在右边。）我尝试使用：

text-align: left;

但是，我的箭头没有向右对齐，我不知道该怎么做。

HTML 文件：

<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
    <form class="form-inline">
      <div class="form-group">
        <div class="col-md-8">
        <input type="email" class="form-control" placeholder="Email Address" id="email-form">
      </div> 
       </div>
      <div class="dropdown">
        <div class="col-md-8">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
        </div>
      </div>
    </form>
    </div>
  </div> 
</body>
</html>

CSS 文件：

body
{
  background: #000639;
}

#email-form 
{
    line-height: 250%;
    margin-right: 115px;
    width: 158%;
}

#dropdown
{
    line-height: 250%;
    width: 238%;
    text-align: left;
}

.row
{
    margin-top: 10%;
}

全屏：

【问题讨论】：

您可以尝试删除应用于#dropdown 的样式width: 238% 吗？它正在扩展其父级的宽度。有这样做的理由吗？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用::after 选择器来定位箭头。

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}

body {
  background: #000639;
}

#email-form {
  line-height: 250%;
  margin-right: 115px;
  width: 158%;
}

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
}

.row {
  margin-top: 10%;
}

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}

<html>

<head>
  <title>Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="row justify-content-center">
      <form class="form-inline">
        <div class="form-group">
          <div class="col-md-8">
            <input type="email" class="form-control" placeholder="Email Address" id="email-form">
          </div>
        </div>
        <div class="dropdown">
          <div class="col-md-8">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

调整 ::after 选择器的左边距。

jsfiddle

.dropdown-toggle::after{

margin-left: 3.3em;
}

【讨论】：

调整窗口大小会扭曲间距

【解决方案3】：

使用 Flexbox 可以很容易地获得这种效果。将display:flex; 添加到您的#dropdown 定义并设置align-items: center;，以便元素将在其容器内垂直居中。

确保您的第一个元素贴在左边，而右下拉箭头贴在右边。您可以设置justify-content: space-between，这将尝试填满两个项目之间的所有空间。

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
  display:flex;
  align-items: center;
  justify-content: space-between;
}

弹性盒子万岁！

【讨论】：