Css引导响应问题答案

【问题标题】：Css bootstrap responsive issueCss引导响应问题
【发布时间】：2018-04-19 15:53:11
【问题描述】：

我希望它能够响应平板电脑，尽管它是。这看起来像这样

我希望 1 介于两者之间，右侧还有很多空间还有 2 号 div 介于 div 1 之间。

<div class="row">
    <div class="col-lg-11 col-lg-offset-1">
        <div class="col-lg-3  mob-padding">
            <form method="post" class="bottom-form">
                <input class="bottom-imput bg-blue" type="email" name="email" placeholder="example@mail.com">
                <br>
                <input class="bottom-imput bg-blue" type="email" name="password" placeholder="*****">
                <br><small>Mot de passe oublié ? </small> &nbsp; &nbsp; &nbsp; <button type="submit" class="bottom-button bg-light-blue">S'identifier</button>
            </form>
        </div>
				
        <div class="col-lg-9 col-sm-9 mob-padding">
            <div class="col-lg-4 col-sm-3 mob-padding ">
                <a href="#">Mission & Attributions</a>
                <br>
                <a href="#">Organisation</a>
                <br>
                <a href="#">Perimètre d'intervention</a>
                <br>
                <a href="#">Mode d'integration</a>
                <br>
            </div>
            <div class="col-lg-4 col-sm-3 mob-padding">
                <a href="#">Bilan</a>
                <br>
                <a href="#">Corps des Inspecteurs</a>
                <br>
                <a href="#">Trombinoscope des Inspecteurs </a>
                <br>
                <a href="#">IGF répond a vos questions </a>
                <br>
            </div>
            <div class="col-lg-4 col-sm-3 mob-padding ">
                <a href="#">Public document</a>
                <br>
                <a href="#">Ministères </a>
                <br>
                <a href="#">Finances publiques </a>
                <br>
                <a href="#">Collectivités territoriales </a>
                <br>
                <a href="#">Administration publique </a>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您使用哪个版本的引导程序？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

只需尝试将col-md-6添加到您的 div 类和相应的样式如下。

<div class="row" style="position:relative;">
                <div class="col-lg-11 col-lg-offset-1 col-md-6" style="position:absolute;left:25%;">
                
                        <div class="col-lg-3 col-md-6 mob-padding" >
                            <form method="post" class="bottom-form">
                                <input class="bottom-imput bg-blue" type="email" name="email" placeholder="example@mail.com">
                                <br>
                                <input class="bottom-imput bg-blue" type="email" name="password" placeholder="*****">
                                <br><small>Mot de passe oublié ? </small> &nbsp; &nbsp; &nbsp; <button type="submit" class="bottom-button bg-light-blue">S'identifier</button>
                            </form>
                        </div>
    				
    					<div class="col-lg-9 col-sm-9 col-md-6 mob-padding" style="position:relative;margin-top:20px;">
                        <div class="col-lg-4 col-sm-3 col-md-6 mob-padding" style="position:relative;">
                            <a href="#">Mission & Attributions</a>
                            <br>
                            <a href="#">Organisation</a>
                            <br>
                            <a href="#">Perimètre d'intervention</a>
                            <br>
                            <a href="#">Mode d'integration</a>
                            <br>
                        </div>
                        <div class="col-lg-4 col-sm-3 col-md-6 mob-padding" style="position:absolute; left:75%;top:0;">
                            <a href="#">Bilan</a>
                            <br>
                            <a href="#">Corps des Inspecteurs</a>
                            <br>
                            <a href="#">Trombinoscope des Inspecteurs </a>
                            <br>
                            <a href="#">IGF répond a vos questions </a>
                            <br>
                        </div>
                        <div class="col-lg-4 col-sm-3 mob-padding "style="position:absolute; left:125%;top:0;">
                            <a href="#">Public document</a>
                            <br>
                            <a href="#">Ministères </a>
                            <br>
                            <a href="#">Finances publiques </a>
                            <br>
                            <a href="#">Collectivités territoriales </a>
                            <br>
                            <a href="#">Administration publique </a>
                        </div>
                        </div>
                       
                            
                        
                    </div>
                </div>

【讨论】：