0
Ich habe Probleme mit der CSS auf, wie ich meinen Inhalt innerhalb einer div, die eine Grenze hat, um innen und horizontal bleiben. Wenn der Inhalt der Spalten nicht mehr ausreicht, werden die Spalten und der Inhalt nach unten verschoben. Ich möchte, dass sie horizontal und lesbar bleiben, anstatt sich nach unten zu bewegen.innerhalb divs bewegen auf die Minimierung der Breite des Bildschirms
Bild vor Bildschirmbreite zu minimieren: 
Bild nach Bildschirmbreite zu minimieren:
Wie Sie in den den Inhalt sehen kann doesnt setzen zu bleiben !!
Hier ist mein html und einige CSS:
<div class="container3" style="">
\t <div class="row"> \t
\t \t <div class="col-md-11" style="min-width:760px;">
\t \t \t <div class="panel panel-default" style="">
\t \t \t \t
\t \t \t \t <div class="panel-heading" >
\t \t \t \t \t <div >
\t \t \t \t \t \t <h style="margin-left:40px;">Your Requests </h>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div style="float:right;margin-top:-30px;">Total: $<div id="sum" style="float:right;"> </div>
\t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <% @revisers.each do |reviser| %>
\t \t \t \t <% reviser.reservations.where("status = ?", true).each do |reservation| %>
<script>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t var total = <%= reviser.reservations.where("status = ?", true).sum(:total) %>;
\t \t \t \t \t \t \t $('#sum').html(total);
\t \t \t \t \t
\t \t \t \t \t </script>
\t \t \t \t <div class="panel-body" style="">
\t \t \t \t \t <div class="col-md-12" style="border:3px solid black;height:108px;max-height:108px;min-width:703px;overflow:hidden;">
\t \t \t \t \t \t <!-- first column -->
\t \t \t \t \t \t <div class="row" style="">
\t \t \t \t \t \t \t <div class="col-sm-3 center" style="">
\t \t \t \t \t \t \t \t <div style="margin-left:-45px;">
\t \t \t \t \t \t \t \t \t <%= reservation.reviser.essay_type %>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" >
\t \t \t \t \t \t \t \t <div style=" margin-left:-40px;">
\t \t \t \t \t \t \t \t \t File
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" >
\t \t \t \t \t \t \t <div style="margin-left:35px;">
\t \t \t \t \t \t \t \t Due
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" >
\t \t \t \t \t \t \t <div style="margin-left:70px;">
\t \t \t \t \t \t \t \t File
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" style="">
\t \t \t \t \t \t \t \t <div style="margin-left:110px;">
\t \t \t \t \t \t \t \t \t Total
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- second column -->
\t \t \t \t \t \t <div class="row" style="">
\t \t \t \t \t \t \t <div class="col-sm-2" style="">
\t \t \t \t \t \t \t \t <div style="margin-left:20px;">
\t \t \t \t \t \t \t \t \t <%= render 'shared/essayicons', reviser: reservation.reviser %>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1" >
\t \t \t \t \t \t \t \t <li class="thumbnail2" style=""><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1 center" style="margin-top:10px;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div style="color:green;margin-left:10px;">
\t \t \t \t \t \t \t \t \t \t sent
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t --->
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1">
\t \t \t \t \t \t \t \t <li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center">
\t \t \t \t \t \t \t \t <%= reservation.due_date %>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1">
\t \t \t \t \t \t \t \t <li class="thumbnail2"><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1 center" style="margin-top:10px;">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div style="color:green;margin-left:10px;">
\t \t \t \t \t \t \t \t \t \t sent
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <---
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1">
\t \t \t \t \t \t \t \t <li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-1 center" style="margin-left:30px;">
\t \t \t \t \t \t \t \t <h4>$<%= reservation.total %></h4>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <!-- \t Third Column -->
\t \t \t \t \t \t <div class="row" style="">
\t \t \t \t \t \t \t <div class="col-sm-2 center">
\t \t \t \t \t \t \t <div>
\t \t \t \t \t \t \t \t <%= time_ago_in_words(reservation.created_at) %> ago
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" style="">
\t \t \t \t \t \t \t <div style="margin-left:-45px;">
\t \t \t \t \t \t \t \t <%= reservation.user.username %>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center">
\t \t \t \t \t \t \t <div style="margin-left:-40px;">
\t \t \t \t \t \t \t \t <%= reservation.reviser.user.username %>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" >
\t \t \t \t \t \t \t <div style="margin-left:70px;">
\t \t \t \t \t \t \t \t <%= reservation.user.username %>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="col-sm-2 center" >
\t \t \t \t \t \t \t <div style="margin-left:50px;">
\t \t \t \t \t \t \t \t <%= reservation.reviser.user.username %>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <% end %>
\t \t \t \t <% end %>
\t \t \t </div>
\t \t </div> \t \t
\t </div>
</div>SCSS Datei:
.container3{
margin:auto;
width:80%;
}
.panel {
border-radius: 8px;
}
.panel-default .panel-heading {
color: #565a5c;
background-color: #edefed;
font-size: 18px;
font-weight: 400;
}
.panel-heading{
margin:0 auto;
h1 {
text-align: center;
}
}
.panel-body{
margin-top: 0px;
}, wie ich diesebekommenaufhören, sich untereinander zu bewegen? Halten Sie sie einfach und wenn jemand die Bildschirmbreite reduziert, werden sie nur auf dem Bildschirm angezeigt, wenn der Benutzer den Bildschirm nicht erneut ausdehnt, so wie die total auf der Kopfzeile in der Nähe von Your Requests nicht zu einem bestimmten Zeitpunkt angezeigt wird, wenn ich Bildschirm minimieren . Danke !! ^^
Ich denke, man auch eine CSS-Datei erhalten, bitte auch den Inhalt dieser Datei schreiben. – BillyNate