Reputation: 891
Is there a way to make a non-responsive grid bootstrap only for certain div? I know there's a way to disable responsiveness by following this step here. But what I want is I only want the non-responsive columnn for my div.
Basically I have 3 buttons, and I want to align it using cols and I want it always fixed in 3 horizontal columns. Currently with the following code the cols will change its position responsively when the window is resized. What is the proper way of doing this other than specifying class="col-sm-4 col-md-4 col-xs-4
for each class? I tried class="col-4"
but it doesn't work. Thank you!
<div class="overlayOptions" ng-show=overlayOptions>
<div class="row">
<div class="col-md-4"><a class="watchButton"><span class="glyphicon glyphicon-plus"></span></a></div>
<div class="col-md-4"><a class="inventoryButton"><span class="glyphicon glyphicon-minus"></span></a></div>
<div class="col-md-4"><a class="storeButton"><span class="glyphicon glyphicon-pencil"></span></a></div>
</div>
</div>
Upvotes: 1
Views: 2498
Reputation: 16311
Just specify only the smallest width column, i.e. the col-xs for your divs:
<div class="overlayOptions" ng-show=overlayOptions>
<div class="row">
<div class="col-xs-4"><a class="watchButton"><span class="glyphicon glyphicon-plus"></span></a></div>
<div class="col-xs-4"><a class="inventoryButton"><span class="glyphicon glyphicon-minus"></span></a></div>
<div class="col-xs-4"><a class="storeButton"><span class="glyphicon glyphicon-pencil"></span></a></div>
</div>
</div>
Upvotes: 3