Question

我是新编码并遇到问题。我正在研究一个项目，它必须主要在Bootstrap中完成，尽管我添加了一些css。我希望它看起来像：

信息子弹向下留下IMAGE在中间，信息子弹在右边。所以子弹，图像，子弹。

我相信我的左侧是正确的，图像完全居中于我想要的位置，但右侧根本没有合作。无论我尝试过什么，它都会保留在图像的右下方，而不是从右侧的图像顶部开始。

我尝试过使用p标签，然后将其包含在div中，然后摆脱p标签，只使用了div。我尝试过各种各样的风格....显示：内联块，位置：中心，我试图弄乱边缘，我尝试使用bootstraps＆＃39;在开场标签中的文字中心，我孜孜不倦地搜索了YouTube。我不知道如何让它看起来像我想要的样子。同样，以图像为中心，带项目符号的文本沿着图像的每一侧向下移动。

＆＃13;

    .bottom {
      
    }
    img {
      border: 20px inset gray;
      width: 500px;
      display: block;
      margin: 0 auto;
    }
    .bullet  {
       
    }
    .bullet2 {
      display:inline-block;
      margin-left: 850px;
      margin-bottom:-300px;
    }

＆＃13;

    <div class="container bg-primary">

      <div class="row">

        <div class="col-md-12 col-xs-12">

        <h1 class="text-center text-white">Water</h1>
          <h2 class="text-center text-white"><em>Where there is no water, there is no life</em></h2>

        </div><!--end col12-->

      </div><!--end row-->

      <div class="body">
        <div class="bullet text-white">This is a cool and informative paragraph</div>
                    
        <img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water"/>
        
        <div class="bullet2 text-white">This is a cool and informative paragraph</div>
          
         </div><!--body-->
      </div><!--end container-->

＆＃13;

Answer 1

看起来你正在使用Bootstrap。

如果我理解正确，这个标记架构应该这样做：

container
  row
    col-sm-4
      bullets
    col-sm-4
      img-responsive
    col-sm-4
      bullets

根据Bootstrap的版本以及您希望中断的位置（响应方式），您可能需要将col-sm-4更改为其他Bootstrap网格类。文档：v3。 v4

一个工作示例，使用v3.3.7：

＆＃13;

/* you don't actually need this CSS, it's just for SO */
body { margin: 0; }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <ul>
        <li>A bullet</li>
        <li>Another bullet</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-4">
      <img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water" />
    </div>
    <div class="col-sm-4">
      <ul>
        <li>A bullet</li>
        <li>Another bullet</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

无法定位bootstrap / CSS元素

1 个答案: