Question

We are building a simple website in CSS to provide educational resources for other students here at my school. I have chosen to go with the Bootstrap Columns. The problem is on our school's desktop computers and tablets stacks the columns into different rows, instead of just shrinking the size down.

Here is all of the relevant HTML code:

<!-- Left Side Bar -->
    <div style="background-color:#F3F8FC;" class="col-lg-2 mobile-hide" ><!-- Not Displayed on Mobile -->
        <div class="fotd">
            <div class="fotd-title">
                <h4>Fact Of The Day</h4>
            </div>
            <p>Text</p>
        </div>

        <div class="twitter mobile-hide">
            <a class="twitter-timeline" href="https://twitter.com/RHL_Inspire" data-widget-id="720721136867282945">Tweets by @RHL_Inspire</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
    </div>

<!-- Center Content -->
    <div class="col-lg-7 ">
        <h3 class="content title">Letter from The Editor In Narwhal</h3>
        <p class="content" >
        This is a link. <a href="/math">This is the actual link</a>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis,     
        </p>
    </div>



<!-- Right Side -->
    <div style="background-color:#F3F8FC;" class="col-lg-3 mobile-hide">
       <h3 class ="center mobile-hide">Editors Picks!</h3>
            <ul class="stickynote mobile-hide">
                <li class="stickynote mobile-hide">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>

                <li class="stickynote">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>

                <li class="stickynote">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>

                <li class="stickynote">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>

                <li class="stickynote">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>

                <li class="stickynote">
                    <a class="stickynote" href="http://www.google.com">
                        Google
                    </a>
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <footer>&copy; 2016 The StickyNote | <a href="http://www.google.ca">Google</a></footer>
            </div>
        </div>

Answer 1

问题是我们必须更改代码以指定列的两种大小。例如，在原始代码中我们有：

 <div style="background-color:#F3F8FC;" class="col-lg-7">

这必须简单地改为：

<div style="background-color:#F3F8FC;" class="col-lg-7 col-sm-7">

col-sm-7用于较小的屏幕（例如平板电脑和低分辨率台式电脑。

CSS Columns Responsive Issues

1 个答案: