如何使用div减少列之间的空间

时间:2015-04-28 02:09:47

标签: html css twitter-bootstrap-3

我只想减少列之间的空间;你在http://mathstructure.com/add-subtract-multiply-and-divide/

看到我正在谈论的页面

我网页的用户无法正常查看其他两栏帮助我:

<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="/">Home</a></li>
            <li><a href="/Flashcards">Flashcards</a></li>
            <li class="active">Addition, Subtraction, Multiplication,
                Division</li>
        </ol>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="mcq_cont">
                    <div class="ans_not">
                        <p class="upperp"></p>
                        <p class="lowerp"></p>
                    </div>
                    <div class="ans_ok">
                        <p class="upperok"></p>
                        <p class="lowerok"></p>
                    </div>
                    <div class="question_cont_mcq shadowStyle">
                        <div class="qcont_inner">
                            <p class="a fibq1">9999</p>
                        </div>
                        <div class="qcont_inner">
                            <p class="fibq2">
                                <span class="fibsign">+</span>&nbsp;&nbsp;                

  <span class="b">999</span>
                            </p>
                        </div>
                        <hr>
                    </div>
                    <div class="ans_mcq_cont">
                        <div class="ans_mcq" id="a1"></div>
                        <div class="ans_mcq" id="a2"></div>
                        <div class="ans_mcq" id="a3"></div>
                        <div class="ans_mcq" id="a4"></div>
                    </div>
                </div>
                <div class="fib_cont">
                    <div class="ans_not">
                        <p class="upperp"></p>
                        <p class="lowerp"></p>
                    </div>
                    <div class="ans_ok">
                        <p class="upperok"></p>
                        <p class="lowerok"></p>
                    </div>
                    <div class="question_cont shadowStyle">
                        <div class="qcont_inner">
                            <p class="a fibq1">9999</p>
                        </div>
                        <div class="qcont_inner">
                            <p class="fibq2">
                                <span class="fibsign">+</span>&nbsp;&nbsp;  

  <span class="b">999</span>
                            </p>
                        </div>
                        <hr>
                    </div>
                    <input type="text" class="fib_in" id="answer_input" /> 

 <input
                        type="submit" class="ans" value="ANSWER"/>
                </div>
            </div>
            <div class="row">
                <div class="stat">
                    <p class="statpleft">Number Correct :</p>
                    <p class="statpright" id="stat_correct">0</p>
                    <p class="statpleft">Number Attempted:</p>
                    <p class="statpright" id="stat_attempt">0</p>
                    <p class="statpleft">Percentage:</p>
                    <p class="statpright" id="stat_percent">33</p>
                    <p class="statpleft final_content" id="final_message"></p>
                    <p class="statpright final_content" id="stat_percent">
                        <input type="submit" class="restart" value="RESTART" />
                    </p>
                </div>
            </div>




        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-xs-6">
                    <div class="option_cont">
                        <p class="heading_option">Problem Type</p>
                        <div class="options op1">
                            <input type="radio" id="gtype1" name="gtype" checked /><label
                            for="gtype1"> Addition</label>
                        </div>
                        <div class="options op2">
                            <input type="radio" id="gtype2" name="gtype" /><label
                            for="gtype2"> Subtraction</label>
                        </div>
                        <div class="options op1">
                            <input type="radio" id="gtype3" name="gtype" /><label
                            for="gtype3"> Multiplication</label>
                        </div>
                        <div class="options op2">
                            <input type="radio" id="gtype4" name="gtype" /><label
                            for="gtype4"> Division</label>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="option_cont">
                        <p class="heading_option">Difficulty</p>
                        <div class="options op1">
                            <input type="radio" id="difficult1" name="difficult" checked /><label
                            for="difficult1"> Easy (0-8)</label>
                        </div>
                        <div class="options op2">
                            <input type="radio" id="difficult2" name="difficult" /><label
                            for="difficult2"> Medium (1-12)</label>
                        </div>
                        <div class="options op1">
                            <input type="radio" id="difficult3" name="difficult" /><label
                                for="difficult3"> Hard (1-18)</label>
                        </div>
                        <div class="options op1">
                            <input type="radio" id="difficult4" name="difficult" /><label
                                for="difficult4"> Expert (1-100)</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="option_cont">
                        <p class="heading_option">Answer Type</p>
                        <div class="options op1">
                            <input type="radio" id="atype2" name="atype"/><label
                                for="atype2"> Multiple Choice</label>
                        </div>
                        <div class="options op2">
                            <input type="radio" id="atype1" name="atype" checked/><label
                             for="atype1"> Fill in The Blank</label>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="option_cont">
                       <p class="heading_option">Number Entry</p>
                       <div class="options op1">
                          <input type="radio" id="numberEntryNormal" name="numberEntry"
                             checked /><label for="numberEntryNormal"> Normal</label>
                       </div>
                       <div class="options op2">
                          <input type="radio" id="numberEntryRightToLeft" name="numberEntry" /><label
                             for="numberEntryRightToLeft"> Right to Left</label>
                       </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="option_cont">
                        <p class="heading_option">Math Fact</p>
                        <div class="options">
                          <select id="math_fact_select">
                             <option value="random" selected>Random
                             <option value="0">0
                             <option value="1">1
                             <option value="2">2
                             <option value="3">3
                             <option value="4">4
                             <option value="5">5
                             <option value="6">6
                             <option value="7">7
                             <option value="8">8
                             <option value="9">9
                             <option value="10">10
                             <option value="11">11
                             <option value="12">12
                             <option value="13">13
                             <option value="14">14
                             <option value="15">15
                             <option value="16">16
                             <option value="17">17
                             <option value="18">18
                             <option value="19">19
                             <option value="20">20
                          </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="option_cont">
                        <p class="heading_option">Number of Problems</p>
                        <div class="options">
                          <select id="num_problems_select">
                             <option>10
                             <option>20
                             <option>25
                             <option>50
                             <option selected>100
                          </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="restart_cont">
                        <input type="submit" class="restart" value="RESTART" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="themeBackgroundColor footer">
    <hr>
    <center>
        <a href="/info/about.html" target="_top">About</a> | <a
            href="/info/sponsor.html" target="_top">Sponsors</a> | <a
            href="/info/privacy_policy.html" target="_top">Privacy Policy</a>
        <p>
            <i> Copyright &copy; 1998-2014 Mathstructure.com (Education 4 Free,
                LLC) </i>
        </p>
    </center>
</div>

2 个答案:

答案 0 :(得分:0)

问题在于你的风格。你正在使用bootstrap css并且宽度已关闭。

您的#wrapper max-width设置为1056px,而下面的.container div设置为1170px。

您需要在css文档中更新这些内容。

我会像这样覆盖容器宽度:

{{1}}

这是解决问题的一种非常黑客和极端的方法,但它会使其发挥作用。我建议阅读CSS并掌握它如何处理你的html项目的显示。

希望它有所帮助。

答案 1 :(得分:0)

您总共有3列。而不是使用col-md-6,你可以分成col-md-4 = 12格。这应该可以解决您的问题,看看这个图像预览。 http://snag.gy/zGi7A.jpg