Question

如何不让箭头转到另一条线？如果屏幕没有足够的空间，则会发生这种情况，请参见图像：

enter image description here

CODE：

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th class="shrink">COLUMN 1</th>
            <th class="shrink">COLUMN 2</th>
            <th class="expand">COLUMN 3</th>
            <th class="expand">COLUMN 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="btn-group btn-block">
                    <span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-caret-right"></i>Option 1</a></li>
                    </ul>
                </div>
            </td>
            <td>Some info here</td>
            <td>Some more here</td>
            <td>And here too</td>
        </tr>
        <tr>
            <td>
                <div class="btn-group btn-block">
                    <span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-caret-right"></i>Option 1</a></li>
                    </ul>
                </div>
            </td>
            <td>Some info here</td>
            <td>Some more here</td>
            <td>And here too</td>
        </tr>
        <tr>
            <td>
                <div class="btn-group btn-block">
                    <span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-caret-right"></i>Option 0</a></li>
                    </ul>
                </div>
            </td>
            <td>Some info here again</td>
            <td>yay more info here too</td>
            <td>ok, enough info now, that is enough</td>
        </tr>
    </tbody>
</table>

尝试了一些white-space: nowrap;但无法获得所需的结果。任何帮助都会很棒。箭头必须始终在右侧。

Answer 1

不要将插入符右移，而是将文本向左浮动。

<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>

<强> Demo

Answer 2

span.pull-right在你的“项目描述”之后将i.fa-caret-down浮动到右边，这意味着它被放置在下一行。尝试将放在描述之前。例如：

<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown"> <span class="pull-right"><i class="fa fa-caret-down"></i></span> Description of the item </span>

Sample, fixing the first caret

Answer 3

设置<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="jquery/css/smoothDivScroll.css" type="text/css" /> <script src="jquery/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script> <script src="jquery/js/jquery.kinetic.min.js" type="text/javascript"></script> <title>Untitled Document</title> <style> #makeMeScrollable div.scrollableArea * { position: relative; display: block float: left; margin: 0; padding: 0; /* If you don't want the images in the scroller to be selectable, try the following block of code. It's just a nice feature that prevent the images from accidentally becoming selected/inverted when the user interacts with the scroller. */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function () { $("#makeMeScrollable").smoothDivScroll({ mousewheelScrolling: "allDirections", manualContinuousScrolling: true, autoScrollingMode: "onStart" }); }); </script> <div id="makeMeScrollable"> <img src="images/demo/field.jpg" alt="Field" id="field" /> <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" /> <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" /> <img src="images/demo/golf.jpg" alt="Golf" id="golf" /> <img src="images/demo/river.jpg" alt="River" id="river" /> <img src="images/demo/train.jpg" alt="Train" id="train" /> <img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" /> <img src="images/demo/dog.jpg" alt="Dog" id="dog" /> </div>属性不会影响下拉图标，因为类white-space: nowrap已将float: right;应用于其中，因此它位于不同的流中。

您所描述的内容听起来好像要对图标设置.pull-right。这个确实修复了不受文本影响的图标问题，但它又提出了一个问题：如何在一个不够大的按钮中解析太多文本？< / p>

据我所知，解决此问题的唯一方法是将position: absolute属性应用于按钮，强制将图标所在的右侧间隔为空，并应用如果发生任何溢出，则在文本上省略。你可以在这个JSFiddle中看到这些选择器的组合，我强迫按钮变小，纯粹是为了演示当它们被迫占用你想要的小空间时它会如何工作：

overflow: hidden

使用btn-group时，请勿“换行”箭头

3 个答案: