Text in zwei Spalten anzeigen Bootstrap

Question

Hallo ich möchte eine Textspalte verteilen, die ich von einem SQL Server abrufen (kein Problem beim Abrufen) in zwei Spalten.

Diese jsfiddle

<div class="container-fluid" style="margin-top:170px;"> 
<div class="row"> 
    <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
    <div class="col-lg-6"> 
     <h1>John Doe</h1> 
     <h2><b>Director</b></h2> 
     <h5> 
      Education, title, 
     </h5> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-5 col-lg-6"> 
     <h3 style="margin-top:50px"> 
      About 
     </h3> 
     <p class="pp"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis. 
     </p> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
    </div> 
    <div class="col-sm-5 col-lg-6" style="margin-top:90px"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p> 

zeigt das gewünschte Layout. Wie Sie sehen können, gibt es Absatzräume und es sieht gut aus. Ich bin nur in der Lage, diese far mit der Spalte zu bekommen. Ich kann es nicht wie oben formatiert bekommen. Kann mir jemand helfen, die gewünschte Formatierung zu bekommen?

Answer 1

Zuerst nehmen Sie die h3 Header aus dem .newspaper Element, legen Sie es über diesem, so dass der Text auf der gleichen Ebene in beiden Spalten beginnt. Dann fügen Sie Bootstrap-Klassen entsprechend sowohl der h3 und die .newspaper DIV die negative Marge zu vermeiden und die Breite auf kleineren Bildschirmen zu begrenzen, wie in dem Beispiel, das Sie zitiert: class="col-sm-10 col-lg-12"

Hier ist das Ergebnis: https://jsfiddle.net/sozeojgx/1/

Answer 2

Sie können es erreichen von nur 2 Medien-Anfragen:

@media only screen and (max-width: 768px) { 
    .margin{ 
    margin-top: 0px; 
    } 
} 
@media only screen and (min-width: 769px) { 
    .margin{ 
    margin-top: 85px; 
    } 
} 

hat soeben eine Klasse margin und hinzugefügt Medienabfrage. prüfen diese CODEPEN

@media only screen and (max-width: 768px) { 
 
    .margin { 
 
    margin-top: 0px; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 769px) { 
 
    .margin { 
 
    margin-top: 85px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid" style="margin-top:170px;"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
 
    <div class="col-lg-6"> 
 
     <h1>John Doe</h1> 
 
     <h2><b>Director</b></h2> 
 
     <h5> 
 
     Education, title, 
 
     </h5> 
 
    </div> 
 
    <div class="col-lg-6"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-5 col-lg-6"> 
 
     <h3 style="margin-top:50px"> 
 
     About 
 
     </h3> 
 
     <p class="pp"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis 
 
     purus. Nulla tristique iaculis. 
 
     </p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. 
 
     Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
 
    </div> 
 
    <div class="col-sm-6 col-lg-6 margin"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis 
 
     fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu. 
 
     <p> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula n</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Änderung der Klasse von div col-xs-6 col-sm-6 col-md-6 col-lg-6

Ich habe nur Änderungen an HTML vorgenommen und es funktioniert einwandfrei.

<div class="container-fluid" style="margin-top:170px;"> 
    <div class="row"> 
     <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h1>John Doe</h1> 
      <h2><b>Director</b></h2> 
      <h5> 
       Education, title, 
      </h5> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h3 style="margin-top:50px"> 
       About 
      </h3> 
      <p class="pp"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis. 
      </p> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
     </div> 
     <div class="col-sm-5 col-lg-6" style="margin-top:90px"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula. 
      </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p> 
</div> 
    </div>  

</div>