Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Problem bei Darstellung auf iPhone/iPad
#1
Hallo Zusammen,

gleich vorneweg, dies ist mein erstes Projekt mit Bootstrap überhaupt.

Ich habe eine Seite gestaltet die responsiv sein soll. Wenn ich in Chrome im Inspector die verschiedenen Bildschirmgrößen teste funktioniert auch alles tadellos. Im Real-Versuch mit einem iPhone 5s und einem iPad gibt es allerdings Probleme bei der Anzeige der Bilder. Diese werden zwar in der Breite korrekt angepasst, jedoch nicht in der Höhe. Mir scheint es wird immer die volle Höhe verwendet. Das schaut natürlich bescheuert aus. Ausser der Bootstrap .css habe ich zwar noch eine separate .css Datei, in der aber Bilder nicht angesprochen werden.
Ich bin ratlos.
Da das Beispiel recht kurz ist, füge ich mal den .html code hier bei:

Code:
<!doctype html>
<html lang="de">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/screen.css">

    <title>MARKEMARGHESCU-HALLO</title>
  </head>
  <body>
    <div class="container">
      <header>
        <div class="row">
          <div class="col-sm-4 logo"><img src="images/Logo_MM.PNG" class="img-fluid float-right"></div>
        </div>
      </header>
      <div class="row">
        <div class="col-sm-4">
          <ul class="nav flex-column site-nav float-right">
            <li class="nav-item text-right">
              <a class="nav-link active" href="#">HALLO</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">MARKEMARGHESCU</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">FREIE&nbspARBEITEN</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">AUFTRAGSARBEITEN</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link text-right" href="#">ICH</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">HIER</a>
            </li>
            <li class="nav-item text-right">
              <a class="nav-link" href="#">JETZT</a>
            </li>
          </ul>
        </div>
        <div class="col-sm-8">
          <div class="row">
            <h1>MARKEMARGHESCU IST EIN KÜNSTLERISCHES EXPERIMENT</h1>
          </div>
          <div class="row">
            <p class="slide-in-top">MARKEMARGHESCU ist der Versuch, sich nicht auf eine „bestimmte“ Identität fest zu legen oder festlegen zu lassen. Weder durch sich noch durch andere. MARKEMARGHESCU ist mit nichts und niemandem identisch außer mit sich selbst. MARKEMARGHESCU ist kein „Produkt“ und insofern auch nicht käuflich. MARKEMARGHESCU ist „produktiv“. Sie „produziert“ Einfälle, Gedanken, Bilder, Texte, Gespräche, Begegnungen, Lösungen  u.v.m., die sich zu „Produkten“ verdichten können. Typische Produkte von MARKEMARGHESCU sind Konzepte und Lösungen zur Kommunikation. Urheberin, Mentorin, Mäzenin und Sprecherin von MARKEMARGHESCU bin ich: Katalin Marghescu.</p>
          </div>
          <div class="row">
            <img src="images/Musterbild_72.jpg" class="img-fluid slide-in-top" alt="BEISPIELBILD">
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="col">
        <p class="text-center">&copy MARKEMARGHESCU 2019</p>
      </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Vielleicht kann mir hier jemand sagen wo der Wurm ist. Nach etlichen Stunden sehe ich irgendwie gar nichts mehr..
Zitieren
#2
entferne mal das row aus dem übergeordneten div, das macht da eh kein sinn oder steck das image in einen div-container.
Durch row wird Display-flex gesetzt!
Zitieren
#3
Danke für Deine Antwort. Das <img... in ein zusätzliches <div> zu packen hat geholfen. Nachdem du meinen Tag gerettet hast, kann ich mich jetzt der Frage zuwenden, was die Aussage 'durch row wird Display-flex gesetzt' bedeutet. Ich habe noch ausprobiert ob ein zusätzliches <div> ausreicht - tut es nicht. Das <row> muss tatsächlich weg. In meinem Entwurf hatte ich den Gedanken zwei Spalten, links das Menü, rechts der Content. Die Contentspalte unterteilt sich in drei Reihen: Überschrift, Fliesstext und Bild. Das erschien mir logisch und jetzt bin ich verwirrt, warum das falsch ist.
Zitieren
#4
ich habe zu dem 'Flex-Problem jetzt folgendes gefunden: Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side. Daraus schliesse ich jede Spalte muss in eine 'row' gepackt werden, damit alles schön untereinander kommt, aber dann hat die Row auch ihre Schuldigkeit getan.
Zitieren
#5
row ist nicht zwingend notwendig da col auch ohne row funktioniert.
Die Zeilen werden dann über die Summe der col's, definiert also immer wenn 12 col' erreicht sind beginnt eine neue Zeile.
mit row kann aber die flex-Eigenschaften genutzt werden was grade bei responsiven Seiten von Vorteil ist um die Darstellung zu beeinflussen
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Bootstrap 4 Mega Menu
Last Post: The-Error
08.12.2019 12:57
» Replies: 2
» Views: 621
max-width Layout-Breite
Last Post: The-Error
12.11.2019 17:12
» Replies: 1
» Views: 335
Multi-Language in 10.0.8
Last Post: bootshock
01.11.2019 23:19
» Replies: 0
» Views: 405

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 328
» Latest member: michi323
» Forum threads: 256
» Forum posts: 1.007

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently 13 online users. [Complete List]
» 1 Member(s) | 12 Guest(s)
Avatar

>