1. Zuhause
  2. Frage und Antwort
  3. Kann nicht herausfinden, warum Bootstrap-Spalte nicht zusammenbrechen

Kann nicht herausfinden, warum Bootstrap-Spalte nicht zusammenbrechen

2016-12-09 5 views
0

Ich habe ein Raster von 6 mit zwei Zeilen mit Spalten gemacht und versucht, es so zu machen, wenn der Bildschirm von großen zu kleinen Größen von 3 auf 2 umstellt 1. Aber ich kann nicht scheinen, dass das funktioniert, ich hätte schwören können, dass ich das letzte Mal, als ich Bootstrap benutzt habe, es getan habe. Was passiert, wenn der Bildschirm seine Größe ändert, beginnen sich die Profile übereinander zu überlappen. Was ich versucht habe, ist eine css-Zeile für jede Auflösung hinzuzufügen und den Prozentsatz der Breite zu erhöhen, der zu funktionieren scheint, aber ich denke, es ist kein sauberer Ansatz.Kann nicht herausfinden, warum Bootstrap-Spalte nicht zusammenbrechen

hier ist der Code:

<!-- Spotlight --> 
<section id="spotlight"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Xanthe</h3> 
      <p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of her 
      cousin who is battling leukemia. 
      </p> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Team Gary</h3> 
      <p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Johnny Blonde Kitchen</h3> 
      <p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches 
      to Locks Of Love. We are so excited to have them be a part of our CCS family!</p> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Brevitas Consulting</h3> 
      <p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas! 
      </p> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Irudaya</h3> 
      <p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing work!</p> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
      <h3>Maureen Parent</h3> 
      <p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p> 
     </div> 
     </div> 
    </div> 
    <div class="row text-center"> 
     <div class="col-sm-12"> 
     <div class="col-sm-12"> 
     <div class="addPad"> 
      <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p> 
     </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</section> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- Spotlight --> 
 
<section id="spotlight"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Xanthe</h3> 
 
      <p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of 
 
       her cousin who is battling leukemia. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Team Gary</h3> 
 
      <p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Johnny Blonde Kitchen</h3> 
 
      <p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches 
 
       to Locks Of Love. We are so excited to have them be a part of our CCS family!</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Brevitas Consulting</h3> 
 
      <p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas! 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Irudaya</h3> 
 
      <p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing 
 
       work!</p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="card card-3"> 
 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg"> 
 
      <h3>Maureen Parent</h3> 
 
      <p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row text-center"> 
 
     <div class="col-sm-12"> 
 
      <div class="col-sm-12"> 
 
      <div class="addPad"> 
 
       <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a> 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Sie eine bessere Vorstellung davon zu geben, was ein Screenshot ist hier passiert, wenn der Bildschirm erreicht 991px

screenshot

Jeder Vorschlag wird sehr geschätzt! Danke für Ihre Zeit

Update Umstrukturierung der HTML nach W3S, gibt mir immer noch das gleiche überlappende Problem.

<section id="spotlight"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/xanthe.jpg"> 
      <h3>Xanthe</h3> 
      <p> </p> 
     </div> 
     </div> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/TeamGary.jpg"> 
      <h3>Team Gary</h3> 
      <p></p> 
     </div> 
     </div> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/Johnny.jpg"> 
      <h3>Johnny Blonde Kitchen</h3> 
      <p></p> 
     </div> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/Brevitas.jpg"> 
      <h3>Brevitas Consulting</h3> 
      <p></p> 
     </div> 
     </div> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/irudaya.jpg"> 
      <h3>Irudaya</h3> 
      <p></p> 
     </div> 
     </div> 
     <div class="col-sm-4"> 
     <div class="card card-3"> 
      <img src="http://convio.cancer.ca/mIFE/img/spotlight/MaureenParent.jpg"> 
      <h3>Maureen Parent</h3> 
      <p></p> 
     </div> 
     </div> 
    </div> 
    <div class="row text-center"> 
     <div class="col-sm-12"> 
     <div class="col-sm-12"> 
     <div class="addPad"> 
      <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p> 
     </div> 
     </div> 
     </div> 
    </div> 
</div> 
</section>

Quelle

2016-12-09 Umeed

+0

Kommt dies vor, wenn die Breite kleiner wird? Auch welcher Browser? – MattD

+0

Wenn Sie außerdem angeben, dass Sie benutzerdefiniertes CSS implementiert haben, müssen Sie dies berücksichtigen. In beiden Fällen müssen Sie genauer bestimmen, ob das Problem auftritt, wenn die Seite/das Fenster breiter oder schmaler wird. – MattD

+0

@MattD Entschuldigung für die späte Antwort Internet wurde ausgeschlagen, Ja, da die Bildschirmbreite kleiner wird, und es passiert in allen gängigen Browsern, IE, Firefox und Chrome. Der Grund dafür, dass ich das benutzerdefinierte CSS nicht aufgenommen habe, ist, dass ich es aus der Referenz entfernt habe und es immer noch passiert. Anstatt von 3 auf 2 zu 1 zu kollabieren, geht es von 3 zu 1. Also bin ich verwirrt – Umeed

Antwort

1

Die Bilder sind das Problem hier. Fügen Sie dem Image-Tag class = "img-responsive" hinzu und es sollte es für Sie beheben. Ab einer bestimmten Breite wird die Bildgröße größer als die Spaltenbreite und überlappt daher.

Quelle

2016-12-12 18:06:47

+0

uppedate Dank für den Vorschlag, ich gab es einen Schuss, entfernt alle CSS-Größe und versuchte es aus und es passiert immer noch. Eine Sache, die mir aufgefallen ist, ist, dass wenn das Fenster seine Größe ändert, das Raster über den Rand der Seite hinausgeht, bis es von 3 auf 1 kollabiert, was seltsam ist. Ich habe das vorher nicht bemerkt, die 'img-responsive'-Klasse entfernt und ich sehe, dass sie immer noch da ist, also denke ich, dass ich ein Layout-Problem mit meiner ganzen Seite habe? es ist nur der eine Bereich, in dem es passiert, aber nichts anderes schiebt den Bildschirm in der Desktop-Ansicht ab, wenn das Fenster seine Größe ändert. – Umeed

+1

@Umeed Hier ist die Arbeit Geige mit Ihrem Code + class = "img-responsive" https://jsfiddle.net/mcad1jzh/ Sieht aus wie ein anderes Problem mit Ihrer Einrichtung vielleicht. –

+0

Oh, also kollabiert auf 2 nicht wirklich? Also, was passiert, ist richtig, und die Bilder verändern sich. Interessant, okay, ich werde etwas ausprobieren. Danke König das hilft sehr! – Umeed

Verwandte Themen

 Verwandte Themen