Reputation: 12443
I want 2 divs on the same row. One taking up 8 columns and the next taking up 4 columns.
However, It is automatically blocking off the remaining columns in the row, causing every div with col-xx-xx to take up a full row. Here is what I mean:
How do I get it to stop blocking off the rest of the row so I can have both divs on the same row?
Making the div with 4 cols take up less space by deleting its contents doesn't work. Neither does turning the div with 4 cols into a col-xs-3.
Code:
<div id="shops-section">
<div id="map" #map></div>
<ul>
<li *ngFor="let shop of result?.nearbyShops">
<div class="container-fluid">
<div class="row">
<div class="shop-details">
<div class="col-xs-8">
<h5>{{ shop.name }}</h5>
<h6>{{ shop.address }}</h6>
<button id="open-hours" type="button" class="btn btn-default">OPEN HOURS</button>
</div>
<div class="col-xs-4">
<div class="icon-container">
<img class="icon card-icon review-icon" src="images/sad-face.png">
<h6>10</h6>
<img class="icon card-icon review-icon" src="images/happy-face.png">
<h6>21</h6>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
css:
#map {
height: 325px;
width: 100%;
max-width: none !important;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
#map > div {
max-width: none !important;
border-top-right-radius: 10px;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
.shop-details {
width: 100%;
background-color: #fff;
border-right: 1px solid rgba(0,0,0,.08);
border-left: 1px solid rgba(0,0,0,.08);
border-bottom: 1px solid rgba(0,0,0,.08);
padding:18px;
}
.shop-details h5 {
text-transform: uppercase;
color: $primary-500;
font-weight: 200;
text-transform: uppercase;
}
.shop-details h6 {
color: $primary-500;
text-transform: uppercase;
font-size: 12px;
}
#open-hours {
font-weight: 200;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
text-decoration: none;
text-decoration: none;
padding: 12px;
color: $accent;
cursor: pointer;
border: 1px solid $accent;
background: transparent;
padding: 4px;
font-size: 10px;
}
li {
list-style-type: none;
}
ul {
padding-left: 0 !important;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.icon-container {
display: flex;
margin-top: 0;
align-items: center;
justify-content: center;
}
.icon-container img {
margin-right: 0;
margin-right: 8px;
}
.icon-container h6 {
font-weight: 200;
display: inline-flex;
margin-right: 15px;
}
.icon {
height: 32px;
margin-right: 10px;
display: inline-flex;
}
Upvotes: 0
Views: 723
Reputation: 362580
The col-*
's need to be the immediate children of the row
. row
>shop-details
>col*
won't work because shop-details
is overriding the negative margins (-15px) of the Bootstrap row
making your columns wrap.
Upvotes: 1
Reputation: 221
i believe the isseu is due to
.shop-details {
padding:18px;
}
which makes the cols too wide to fit across the page. i.e it can no longer fit in the full 12.
Upvotes: 0