如何使用bootstrap 4在没有浮动的情况下使文本环绕图像？

Question

我需要使用bootstrap 4使用浮动文本环绕图像，是否可能？

这是我的代码：

C:\Sites\seekhostel.com>rails db:migrate RAILS_ENV=development
== 20180311182801 AddDeviseToUsers: migrating =================================
-- change_table(:users)
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

SQLite3::SQLException: duplicate column name: email: ALTER TABLE "users" ADD "email" varchar DEFAULT '' NOT NULL
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:7:in `block in up'
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:5:in `up'
bin/rails:4:in `require'
bin/rails:4:in `<main>'

Caused by:
ActiveRecord::StatementInvalid: SQLite3::SQLException: duplicate column name: email: ALTER TABLE "users" ADD "email" varchar DEFAULT '' NOT NULL
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:7:in `block in up'
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:5:in `up'
bin/rails:4:in `require'
bin/rails:4:in `<main>'

Caused by:
SQLite3::SQLException: duplicate column name: email
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:7:in `block in up'
C:/Sites/seekhostel.com/db/migrate/20180311182801_add_devise_to_users.rb:5:in `up'
bin/rails:4:in `require'
bin/rails:4:in `<main>'
Tasks: TOP => db:migrate
(See full trace by running task with --trace)

我现在拥有的是：

这是我需要的：

Answer 1

  

我需要使用bootstrap 4使用浮动文本环绕图像，是否可能？

不，在这种情况下，您必须使用float-left类作为图像。但是您不必为图像使用任何包装器。您可以完全摆脱该包装div并将您的类添加到图像中。

你绝对必须做的另一件事：

将所有内容放入Bootstrap列，因为只有Bootstrap列可能是Bootstrap行的直接子项。

这是一个正常工作的代码片段（注意：我在那里留下了图片包装器div，但我建议你摆脱它，因为那是完全不必要的代码。直接将你的类添加到图像中）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <article class="row single-post mt-5 no-gutters">
        <div class="col-md-6">
            <div class="image-wrapper float-left pr-3">
                <img src="https://placeimg.com/150/150/animals" alt="">
            </div>
            <div class="single-post-content-wrapper p-3">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
                <br><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
            </div>
        </div>
    </article>
</div>

Answer 2

为什么不使用这样的东西：

<div class="container">
  <img src="img/example.png" align="left" width="50%">
  <p>Text here</p>
</div>

辛普

  

align =“ left”

会做的！

Answer 3

<div class="row">
  <div class="col-lg-2 col-12">
    <div class="icon mb-4 text-center"><i class="fa fa-github"></i></div>
  </div>
<div class="col-10">
    <h4 class="h4">Title</h4>
    <p class="text-muted">Some text here</p>
</div>

我已经在引导程序4中使用了它。