在bootstrap中获取中心单词和句子

Question

我是新手的助推器。我有以下引导代码：

<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和字下一些关于汽车的描述。像这样的形象。我怎么能这样做？

见图：

Answer 1

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据您提供的代码，我假设您使用的是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的网格将填充应用于列包装器，所以除非您希望对内容区域和装订线重新着色，否则应避免直接将背景应用于此元素。

（2）目前尚不清楚为什么在.col-md-3内使用.col-md-10，但列总是被包裹在.row内，即使嵌套时也是如此