Question

所以我有以下代码：

<div class="well">                                            
  <div class="row text-center">
    <div class="col-sm-1">&nbsp;</div>                                           
    <div class="col-sm-5 col-xs-12">
      <button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
    </div>                                                
    <div class="col-sm-5 col-xs-12">
      <button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
    </div>         
    <div class="col-sm-1">&nbsp;</div>                                           
  </div>                                            
  </div>

这是一个简单的引导程序，里面的列包含应该执行简单警报命令的按钮。问题是，当调整大小到xs size列时（就像我包括的小提琴一样），按钮不起作用。这些按钮甚至不会被识别出来（也就是说，当指针在按钮上方时，鼠标指示器不会切换到指针）。

任何线索我做错了什么？任何帮助将不胜感激，谢谢！

Answer 1

你的最后一个分组

<div class="col-sm-1">&nbsp;</div>

你需要它吗？如果你删除这个div，你可以点击按钮，因为这个div覆盖你的按钮，所以你不能点击它。

Answer 2

只需删除col-xs-12类。默认情况下，col-sm-*类在小屏幕宽度上变为全宽。 col-xs-*中的浮动导致了这个问题。

JSFiddle

如果您使用col-sm-1元素作为水平填充，我建议您使用col-sm-offset-*类，例如

<div class="row">
    <div class="col-sm-5 col-sm-offset-1">
        <button>...</button>
    </div>
    <div class="col-sm-5">
        <button>...</button>
    </div>
</div>

JSFiddle

Answer 3

<!-- Their are 2 ways. either make a function or can go through the second way -->   
function f(thetext)
{
    alert(thetext);
}

<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>

<!--Or you can go the following way by deleting the following line in your code.-->

<div class="col-sm-1">&nbsp;</div>

引导程序内的按钮不起作用

3 个答案: