我只想减少列之间的空间;你在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>
<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>
<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 © 1998-2014 Mathstructure.com (Education 4 Free,
LLC) </i>
</p>
</center>
</div>
答案 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