Bootstrap-2-Spalten-Layout

Hallo an alle,

Ich bin für etwas Unterstützung hier suchen. Ich wurde gebeten, das obige Design zu erstellen und habe Probleme damit, da ich die 2 Spalten nicht korrekt erstellen kann.

Derzeit mache ich folgendes:

<div class="col-lg-12"> 
    <hr> 
    <div class="col-md-7"> 
     <div class="blogHead"> 
      <h2>The Cycle to Work Scheme information</h2> 
     </div> 
     <div class="blogBody"> 
      <p>Some text.</p><a class="btn lightBlueSolid">Press For More Information</a> 
     </div> 
    </div><!---- I repeat this div a few times --> 
    <div class="col-md-5"><img alt="" class="img-responsive img-thumbnail pad-20" src="images/insentives/bike.jpg"></div> 
</div>

Könnte ich bitte hier einige Hinweise bekommen, bitte schreiben Code nicht. Ich suche Führung, keine Lösung :)

Quelle

2017-06-20 PoppaFluff

Stellen Sie sich eine Tabelle mit 12 Spalten vor. Das ist die Logik, die Bootstrap verwendet.

Sie müssen also entscheiden, welchen Anteil Sie wollen. Ich würde sagen, Sie wollen 8/12 Spalten für die linke und die Seite Ihres Inhalts, die 4/12 Spalten für die rechte verlässt (mit anderen Worten, der Hauptteil Ihres Inhalts nimmt die ersten 75% der Seite horizontal) .

Der Code, den Sie würde müssen:

<html> 
    <head> 
     <!-- All the stuff here to link to Bootstrap --> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-sm-8"> 
       <!-- CONTENT HERE --> 
      </div> 
      <div class="col-sm-4"> 
       <!-- SIDEBAR CONTENT HERE --> 
      </div> 
     </div> 
    </body> 
</html>

In jedem div Sie dann div id = „Zeile“ verwenden können Inhalte horizontal zwischen den beiden ausgerichtet haben, wenn Sie das brauchen.

Hoffentlich hilft das. Es könnte sich lohnen, das Bootstrap documentation zu überprüfen.

Quelle

2017-06-20 15:40:31 lukecolli98

Danke :) Ich hatte ehrlich ein Hirn furze :) – PoppaFluff

Wenn dies Ihre Frage beantwortet bitte markieren Sie es als Antwort und/oder upvote :) Froh, ich könnte helfen – lukecolli98

<html> 
<div class="col-md-12"> 
<div class=col-md-9 pull-left> 
your left side content 
</div> 
<div class =col-md-3> 
right side form 
</div> 
</div> 
</html>

Quelle

2017-06-20 12:47:07 Rahul

Als erstes haben Sie den Pull für Spalten falsch verwendet: http://getbootstrap.com/css/#grid-column-ordering. Zweitens, es gibt wirklich keine Notwendigkeit dafür mit dem einfachen Layout, das er anstrebt. Drittens sehe ich nicht den Punkt darin, die md 9 und 3 divs innerhalb eines md 12 div zu setzen. – MattD

Während dieses Code-Snippet die Frage lösen kann, [hilft eine Erklärung] (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) wirklich, um die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, und diese Leute könnten die Gründe für Ihren Codevorschlag nicht kennen. – DimaSan

Ihre Frage ist sehr einfach und Sie werden alles, was Sie brauchen auf der offiziellen documentation mit vielen Beispielen finden.

Quelle

2017-06-20 12:49:15 Antikhippe

Ihre Antwort ist sehr einfach und hätte zu einem Kommentar statt einer Antwort gemacht werden können. – GrumpyCrouton

Sicher aber ich brauche einen Ruf von 50 um die Ausgangsfrage zu kommentieren. ;) – Antikhippe

Es ist generell nicht zum Thema und verpönt, eine Antwort zu posten, die unabhängig von Ihrem Ruf ein Kommentar sein sollte. Bitte schauen Sie [was Sie stattdessen tun sollten] (https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instate)) – GrumpyCrouton

<div class="container"> 
     <div class="row"> 
      <div class="col-md-7"> 
      <!--This one here is the left part of the page, and it contains 
      as many rows as you want, rows defines your Blocks --> 

       <div class="row"> 

       </div> 

       <div class="row"> 

       </div> 

       <div class="row"> 

       </div> 
      </div> 
      <div class="col-md-3 col-md-offset-2"> 
      <!-- here is the Right part of your page, costumize it as you 
      wish --> 
      </div> 
     </div> 
    </div>

Quelle

2017-06-20 13:01:40

Bootstrap-2-Spalten-Layout

Antwort

Verwandte Themen