使用bootstrap对齐图像旁边的文本

Question

我正在使用bootstraps网格系统来尝试对齐图像旁边的文本。出于某种原因，它不适合我。它看起来像这样，我只想要右侧图像旁边的文字。

这是我的HTML：

   <div class="container">
   <h1 class="text-center">Executive Directors</h1>
   <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
   </div>
      <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
   </div>
</div>

任何帮助将不胜感激！

Answer 1

在Bootstrap的网格系统中，要并排获取两个元素，您需要在一个.col中嵌套两个.row div，如下所示：

<div class="container">
    <h1 class="text-center">Executive Directors</h1>
    <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
        </div>
        <div class="col-md-6">
            <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
    </div>
</div>

要了解有关bootstrap网格系统的更多信息，请转到here。

Answer 2

使用此

更改您的代码

   <div class="container">
   <h1 class="text-center">Executive Directors</h1>
   <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
        </div>
        <div class="col-md-6">

            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>

        </div>
   </div>
      <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
        </div>
        <div class="col-md-6">
        <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>

        </div>

</div>

在你需要的每一行中添加两个cols，一个用于图片，一个用于描述，如下所示：

<div class="row">
    <div class="col-md-6">
       <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
    </div>
    <div class="col-md-6">
       <p> desccription here</p>
    </div>
</div>

现在，图片旁边会显示说明。

在bootstrap的页面中有一个网格教程，了解它here。