引导按钮和文本相对和垂直对齐

Question

我正在尝试通过 bootstrap 4 制作类似于下图的内容。

你可以假设黑色矩形是窗口，绿色是div，里面有三个元素，应该垂直居中，红色是文本，橙色是两个按钮。

这是我的代码，但它不起作用：

如果窗口宽度太小，三个元素应该成行堆叠。

<div class="row justify-content-md-center">
  <div class="col-sm-12">
    <span class="btn-projects scrollto">blablablablablablasalkadfjklasd</span>
    <span class="row justify-content-md-center">
      <span class="col-s-2">
        <a href="/" class="btn-get-started scrollto"><i class="fa fa-google"
            style="color:tomato;margin-left:4px;"></i></a>
      </span>
      <span class="col-s-2">
        <a href="/" class="btn-get-started scrollto"><i class="fa fa-linkedin"
            style="color:tomato;margin-left:4px;"></i></a>
      </span>
    </span>
  </div>
</div>

感谢您的帮助。

Answer 1

您可以根据这些预定义的类col-sm-12 col-md-7 col-lg-6 col-xl-5来管理行内的宽度。所以不需要内联 CSS。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row justify-content-center border border-dark p-5">
    <div class="col-sm-12 col-md-7 col-lg-6 col-xl-5">
      <div class="row justify-content-center align-items-center border border-success text-center">
        <span class="col-2">
          <a href="/" class="text-warning">
            <i class="fa fa-md fa-star"></i>
          </a>
        </span>
        <span class="col-8 border border-danger">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </span>
        <span class="col-2">
          <a href="/" class="text-warning">
            <i class="fa fa-md fa-star"></i>
          </a>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 2

使用引导程序的一个好方法是使用col 和row 引导程序类将内容映射到页面，在您的情况下，一个很好的方法是创建一个row 和内部它使用 col 类创建 3 列，对齐我只使用普通的旧样式来垂直和水平对齐内容：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row" style="border: 2px solid black;height:150px;padding:0;margin:0">
  <div class="col-sm-12" style="display:flex;justify-content:center;align-items:center">
    <div class="row"
      style="border: 1px solid green;display:flex;justify-content:center;align-items:center;text-align:center">
      <span class="col-sm-2">
        <a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-google" style="color:tomato;"></i></a>
      </span>
      <span class="col-sm-8" style="border: 1px solid red">blablablablablabla</span>
      <span class="col-sm-2">
        <a href="/" class="btn-get-started scrollto"> <i class="fa fa-md fa-linkedin" style="color:tomato;"></i></a>
      </span>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

代码与您的基本相同，带有重新排列和中心样式，示例的高度设置为 150px 用于示例目的，但您可以将其设置为 100% 或您希望的任何高度你的项目。我使用的col 相对比例也是出于演示目的，您当然可以使用任何您需要的尺寸。

我刚刚添加了适当的外部链接，以便可以运行 sn-p。

请注意，内联样式也用于示例目的，您可以/应该将它们放在样式表中。

Answer 3

为child two添加宽度以设置固定宽度。

.black {
    border: 1px black solid;
    padding: 5% 10%;
    margin: 10%;
}
.main {
    border: 1px green solid;
    padding: 5px;
    display: flex;
}
.child{
    display: inline-block;
    width: 100%;
    padding: 15px 0px;
}
.child.one:hover,
.child.three:hover{
    cursor: pointer;
    background-color: #efefef;
}
.child.one{
    width: 50px;
    border: 1px #ff9800 solid;
    text-align: center;
}
.child.two{
    width: 100%;
    margin: 0px 5px;
    padding: 15px;
    border: 1px red solid;
}
.child.three{
    width: 50px;
    border: 1px #ff9800 solid;
    text-align: center;
}

<div class="black">
    <div class="main">
        <a class="child one">G</a>
        <div class="child two">Hurraaayyy!</div>
        <a class="child three">G</a>
    </div>
</div>