Bootstrap-inline-block-Darstellung

Ich habe eine Frage, warum das Ergebnis von meinem code wird nicht angezeigt als zwei inline-Blöcke zu, aber Blöcke werden angezeigt, einer nach dem anderen. Ich benutze bootstrap vordefinierten Klasse "d-inline-block", aber es funktioniert nur, wenn ein Absatz in einem zweiten div-element ist kürzer als eine Zeile. Ich möchte zwei Blöcke, einer Links, wie eine navigation-block, und eine Rechte, mit einigen Informationen.

Mein code: http://pasted.co/96064fc9

Bitte, können Sie mir zeigen, mein Fehler oder Ratschläge was hinzufügen.

(Die Aufgabe besteht darin, nur HTML und BOOTSTRAP (ich kann nicht meine eigenen CSS-code. Ich kann nur vordefinierte BOOTSTRAP-Klassen))

  • Was meinst du nur HTML und Bootstrap, Bootstrap, CSS und Javascript?
  • Kann man nicht mehr klar bitte, was genau willst du machen?
InformationsquelleAutor Alex Strong | 2017-10-09
  1. 1

    Verwendung von bootstrap ohne die Schaffung von anderen CSS-Regeln, ich glaube, Sie sollten die bootstrap grid wie folgt:

    HTML:

    <head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <ul class="list-group">
          <li class="list-group-item">one</li>
          <li class="list-group-item">two</li>
          <li class="list-group-item">three</li>
          <li class="list-group-item">four</li>
          <li class="list-group-item">five</li>
        </ul>

      </div>
      <div class="col-sm-6">
        <h1>Lorem Ipsum</h1>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</body>

    InformationsquelleAutor Evrard-c
  2. 0

    Bitte denken Sie daran, fügen Sie den code in Frage in der Zukunft.

    Diese CSS wird die Liste zeigen horizontal anstelle von vertikal.

    .list-group,
.list-group-item{
  display: inline-block;
}
    InformationsquelleAutor TidyDev
  3. 0

    CSS:

    .d-inline-block{
width:50%;
float:left;
}

    HTML:

    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="container">
            <div class="d-inline-block">
                <ul class="list-group">
                  <li class="list-group-item">one</li>
                  <li class="list-group-item">two</li>
                  <li class="list-group-item">three</li>
                  <li class="list-group-item">four</li>
                  <li class="list-group-item">five</li>
                </ul>

            </div>
            <div class="d-inline-block">
                <h1>Lorem Ipsum</h1>
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <!-- Replace this comment line by "Web Technology 1" homework solution. -->

	     </div>

        </body>
</html>

    Die Standard-Breite der div ' s ist 100%. fügen Sie den folgenden css:

    .d-inline-block{
width:50%;
float:left;
}
    InformationsquelleAutor DCR
  4. 0

    Seit CSS ist keine option, in der Bootstrap-4 können Sie die media-Objekt-Klassen zu erstellen, die ein Objekt auf einer Seite mit text daneben, dass fließt nicht darunter. Die Beispiele, die Sie geben Bilder verwenden, aber Sie können text auch mit ein.

    <div class="media">
  <div> Text</div>
  <div class="media-body">
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

    Quelle: http://getbootstrap.com/docs/4.0/layout/media-object/

    Bootstrap 3 hat ähnliche Medien-Klassen.

      <div class="media">
    <div class="media-left">
        LEFT
    </div>
    <div class="media-body">
     This text will wrap without going underneath the media-left div
    </div>
  </div>

    Quelle: https://getbootstrap.com/docs/3.3/components/#media

    InformationsquelleAutor Ella
Schreibe einen Kommentar