I don't want the media queries defined in the Bootstrap CSS to override my custom CSS when the user resizes their window.
Here is my HTML code:
<div class="row">
<div class="col-xs-6">
<dl class="dl-horizontal dl-horizontal-info custom">
<dt>item 1</dt>
<dd>description 1 </dd>
<dt>item 2</dt>
<dd>description 2</dd>
<dt>item 3</dt>
<dd>description 3</dd>
<dt>item 4</dt>
<dd>description 4</dd>
<dt>item 5</dt>
<dd>description 5</dd>
</dl>
</div>
<div class="col-xs-6">
<dl class="dl-horizontal dl-horizontal-info custom">
<dt>item 11</dt>
<dd>description 11 </dd>
<dt>item 12</dt>
<dd>description 12</dd>
<dt>item 13</dt>
<dd>description 13</dd>
<dt>item 14</dt>
<dd>description 14</dd>
<dt>item 15</dt>
<dd>description 15</dd>
</dl>
</div>
</div>
Here is my CSS:
@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");
.custom > dt{width:120px;}
.custom > dd{margin-left:130px}
When I resize the window to less than 768px, the media query from Bootstrap CSS overrides my custom CSS, causing dt and dd to align vertically instead of horizontally.
How can I prevent this?
I found that the following code in the Bootstrap.css file is causing the issue:
CSS
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
clear: left;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
So, I modified the code in my custom.css as follows:
CSS
@media (min-width: 768px) {
.dl-horizontal dt {
width:120px;
}
.dl-horizontal dd {
margin-left:130px
}
}
However, the alignment issue persists even after resizing the window.
I want my dl to maintain horizontal alignment regardless of window size.
and not like this