Bootstrap 按钮和文本相对和垂直对齐方式

Question

我正在尝试通过 bootstrap 4.

制作类似于下图的内容

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

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

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

<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

使用bootstrap的一个好方法是使用col和rowbootstrapclasses将内容映射到页面，在你的案例一个很好的方法是创建一个 row 并在其中使用 col class 创建 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相对比例也是为了演示，当然你可以使用任何你需要的尺寸。

我刚刚添加了适当的外部链接，因此代码段可以是运行。

请注意，内联样式也用于示例目的，您 can/should 将它们放在样式 sheet 中。

Answer 2

将宽度添加到 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>

Answer 3

您可以根据这些预定义类 col-sm-12 col-md-7 [来管理行内的宽度 =25=]-6col-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>

Bootstrap 按钮和文本相对和垂直对齐方式

Bootstrap buttons and text relative and vertical alignment

html

css

vertical-alignment

bootstrap-4