1

我是新手。我有以下引导代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div style="padding-top: 25px; ">
  <div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
    <div class="col-md-3">
      <img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
    </div>
  </div>
</div>

现在，我需要第一个图像，然后在图像中心的“汽车”字下到 div 和字下一些关于汽车的描述。像这样的形象。我怎样才能做到这一点？

在此处查看图片：

在这里看图片

4

2 回答 2

1 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-3 text-center">
    <img class="d-block m-auto" src="https://placehold.it/50x50"/>
    <div>Car</div>
    <div>62.3333</div>
    <div>text text text texttext texttext texttext text</div>
  </div>
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
  </div>
</div>

于 2018-06-10T16:42:25.410 回答
1

根据您提供的代码，我假设您使用的是 Bootstrap 3.x，因此下面的代码反映了这一点。您可能在这里依赖的两个主要类（因为有多种方法可以实现您想要的结果）是.text-center和.center-block。第一个仅适用text-align: center于元素，而后者更改显示和左右边距以强制居中。

.your-custom-background {
  background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="your-custom-background text-center">
        <img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
        <p>Car</p>
        <p>Some additional description goes here.</p>
      </div>
    </div>
  </div>
</div>

当您提到您是 Bootstrap 的新手时，还有几点需要注意：

(1) 因为 Bootstrap 的 Grid 将填充应用于列包装器，所以您应该避免将背景直接应用于此元素，除非您希望重新着色内容区域和装订线。

(2) 尚不清楚为什么要在.col-md-3内部使用，.col-md-10但列必须始终包含在 a.row中，即使嵌套也是如此。

于 2018-06-10T17:10:14.680 回答