Question

我在bootstrap上设置了一个测验游戏。这是代码：

<div class="col-md-12">
   <div class="row">
      <div class="col-md-12" style="padding-bottom:20px; text-align:center;">
         <h1>4 . In the three stage theory of memory, the first stage is called short-term memory.</h1>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_A">
         <input type="radio" name="224" value="A" id="option_4_A"> TRUE                                 </label>
      </div>
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_B">
         <input type="radio" name="224" value="B" id="option_4_B"> FALSE                                    </label>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_C">
         <input type="radio" name="224" value="C" id="option_4_C"> Partially True                                   </label>
      </div>
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_D">
         <input type="radio" name="224" value="D" id="option_4_D"> Partially False                                  </label>
      </div>
   </div>
   <hr>
   <input type="button" name="next2" value="Next" id="nt" onclick="hideandshow('4','5') " class="btn btn-success">  
   <input type="hidden" value="3" name="game_id">
</div>

问题在于标签。当标签文本长于列的宽度时，文本消失。我希望它自动中断并继续新的一行。我尝试使用

<label class="btn btn-primary" style="font-size:25px; width:100%; word-wrap: break-word;" id="label_4_B">

但它似乎与我认为的标签无关。如果我能从这个社区获得帮助，那将是非常棒的。谢谢。

Answer 1

您需要覆盖white-space上的nowrap属性，.btn上的Bootstrap设置为label.btn { white-space: initial; } .col-md-12 { width: 200px }：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
   <div class="row">
      <div class="col-md-12" style="padding-bottom:20px; text-align:center;">
         <h1>4 . In the three stage theory of memory, the first stage is called short-term memory.</h1>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_A">
         <input type="radio" name="224" value="A" id="option_4_A"> TRUE                                 </label>
      </div>
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_B">
         <input type="radio" name="224" value="B" id="option_4_B"> FALSE                                    </label>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_C">
         <input type="radio" name="224" value="C" id="option_4_C"> Partially True                                   </label>
      </div>
      <div class="col-md-6">
         <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_D">
         <input type="radio" name="224" value="D" id="option_4_D"> Partially False                                  </label>
      </div>
   </div>
   <hr>
   <input type="button" name="next2" value="Next" id="nt" onclick="hideandshow('4','5') " class="btn btn-success">  
   <input type="hidden" value="3" name="game_id">
</div>

localhost

CSS自动换行属性不适用于Bootstrap中的标签标签

1 个答案: