如何在bootstrap 4中显示文本和图像，以便文本与图像内联？

Question

我想使用bootstrap类和CSS定位我的元素，但是我没能成功。

目前我有以下html：

<div class="container book-wrapper">
  <div class="row">

     <div class="container book-box">
        <div class="row row-one">
           <div class="col-md-">

           <img src="{{$upload->imgURL}}">
           </div>

           <div class="col-md-">

           <h2 id="book-title">{{$upload->name}}</h2>
           <span id="book-desc">{{$upload->description}}</span>

     </div>
  </div>

和CSS：

    .book-box{

    margin-top:20px !important;
    margin-left:20px;

}


#book-desc {
    margin-top: 20px !important;
    text-align: justify !important;
    text-justify: inter-word !important;

}

输出看起来像这样：

有人可以帮我解决这个问题吗？我只想让文字和标题显示在右边而不是图片下方。

Answer 1

您可以为图像使用“col-md-value”，为文本区域使用“col-md-（12-value）”，因此它跨越var response = client.Search<Dictionary<string, object>>(s => s .Query(q => q .QueryString(m => m .Query("username") ) ) .AllTypes() ); foreach (var hit in response.Hits) { foreach (var keyValuePair in hit.Source) { // do something } } 。因为它对entire row (made of 12 columns)具有响应性。

在整页显示中查看。如果要为更小的视口并排显示它们，您只需将以下内容添加到第一行类：

small displays it will wrap in the next row

display:flex

.book-box {
  margin-top: 20px !important;
  margin-left: 20px;
}

#book-desc {
  margin-top: 20px !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

响应更小的屏幕：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container book-wrapper">
  <div class="row">

    <div class="container book-box">
      <div class="row row-one">
        <div class="col-md-4 col-sm-4 col-4">

          <img src="http://via.placeholder.com/300x300">
        </div>

        <div class="col-md-8 col-sm-8 col-8">

          <h2 id="book-title">Title</h2>
          <span id="book-desc">This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random ndom stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is random stuff This is rand stuff  </span>

        </div>
      </div>
      </div>
      </div>

.book-box {
  margin-top: 20px !important;
  margin-left: 20px;
}

#book-desc {
  margin-top: 20px !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

.row-one{
display:flex;
}