M. Gar M. Gar - 1 month ago 9
CSS Question

Assigns min-width to a bootstrap panel

I'm using one

panel panel-defaul
in my page to show some data but I need that the
min-width
of my panel be 720px if the Windows is resizing to less of 720px I need that appear a scrollX but the panel can´t be less of 720px like the use of
table-responsive
when I need to do something like that but using tables I do this:

HTML
<div class="example-table table-responsive">
<table id="example-table" class="table table-hover">
</table>
</div>

CSS
.example-table{
max-width: 720px;
}
#example-table{
min-width: 720px;
}


And if I use the rule
.panel{min-widht:720px;}
nothing happen.

How can I get the same effect in my panel?

EDIT: Ok I try this in jsfiddle and my exact problema is that no matter that I set the
min-width: 760px
the content in the
panel-body
that is the two
col-sm-6
create two rows but I need that the two
col-sm-6
keep the same two columns and not pass to be two rows, at the first I think that was because the
min-weidth
but now I don´t know why this happen even when the scrollX is created.

Answer Source

So according to your updated question, you want your columns to remain inline irrespective of screen width. You can do that by changing your col-sm-6 to col-xs-6 like this:

<div class="col-xs-6">
    <strong>Something here</strong>
</div>
<div class="col-xs-6">
    <strong>Something here</strong>
</div>

jsFiddle: https://jsfiddle.net/rvzy9s5k/1/