Question

我想要这种风格：desktop view

我已经使用col-md-6，并且浮动左边的图像，并以某种方式实现了效果，但如果有更多的文字，文字将在图像下方，我不想要那个，我希望图像保持在左上角，文字不应该在下面。

第二个问题是移动视图，我想看起来像这样（查看第二张图片） mobile view

我认为应该有一些Flexbox的技巧？我将此用作推荐书，如果您有其他选择，请分享：）

LE：

<div class="container">
    <div class="row">
    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    </div>
    <Br> <br> 
    <div class="row">
    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    <div class="col-md-6 clearfix">
<img style="width: 130px; height: 130px; margin-right: 20px;" src="profile.png" class="img-testimonial float-left" alt="...">
<h5><strong> H3 Headline</strong></h5>
<p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming charmed amiable. Him why feebly expect future now. 
c!</p> 
    </div>

    </div>
  </div>

Answer 1

你离它不远。您可以在一行中收集列并在列上应用flex。这是开始的事情。

@media(min-width:767px) {
  .text-center {
    text-align: left;
  }
  .flex {
    display: flex;
    margin-bottom: 24px;
  }
  .flex>div {
    margin-left: 20px;
    margin-right: 20px;
  }
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="row text-center">
      <div class="col-md-6 flex clearfix">
        <img style="width: 130px; height: 130px;" src="http://placehold.it/300x300" class="img-testimonial float-left" alt="...">
        <div>
          <h5><strong> H3 Headline</strong></h5>
          <p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved.
            Not its herself forming charmed amiable. Him why feebly expect future now. c!
          </p>
        </div>
      </div>

      <div class="col-md-6 flex clearfix">
        <img style="width: 130px; height: 130px;" src="http://placehold.it/300x300" class="img-testimonial float-left" alt="...">
        <div>
          <h5><strong> H3 Headline</strong></h5>
          <p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved.
            Not its herself forming charmed amiable. Him why feebly expect future now. c!
          </p>
        </div>
      </div>


      <div class="col-md-6 flex clearfix">
        <img style="width: 130px; height: 130px;" src="http://placehold.it/300x300" class="img-testimonial float-left" alt="..." />
        <div>
          <h5><strong> H3 Headline</strong></h5>
          <p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved.
            Not its herself forming charmed amiable. Him why feebly expect future now. c!
          </p>
        </div>
      </div>

      <div class="col-md-6 flex clearfix">
        <img style="width: 130px; height: 130px;" src="http://placehold.it/300x300" class="img-testimonial float-left" alt="..." />
        <div>
          <h5><strong> H3 Headline</strong></h5>
          <p style="font-size: 1rem; color: #444;"> Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in resembled by in agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved.
            Not its herself forming charmed amiable. Him why feebly expect future now. c!
          </p>
        </div>
      </div>
    </div>
</body>

用侧面图像在boostrap 4上安排内容

1 个答案: