HTML文本框和使用Bootstrap或CSS的同一行上的文本

如何將HTML文本框放在與某些文本相同的行上？下面是我的工作的例子：http://www.bootply.com/FhlyLoLMNv HTML文本框和使用Bootstrap或CSS的同一行上的文本

<div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit <input type="number" id="downtime" class="form-control" style="width:90px" min="1" max="120" inputmode="numeric" pattern="[0-9]*" placeholder="0"> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    <a id="delayed_logoff_help" class="pointer" tabindex="0" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Donec consectetur suscipit orci, fringilla rhoncus erat tristique vel. Phasellus sagittis dapibus fermentum. Donec posuere erat et mi tincidunt, vitae ultricies turpis pellentesque. Morbi volutpat neque lorem, eget luctus leo elementum sed. Cras cursus velit mi. Quisque et vulputate est, gravida elementum urna.">What's this?</a> 
</div>

$('#delayed_logoff_help').popover()

我需要這爲臺式機和移動渲染工作。我已經能夠在桌面上工作，但將class="form-inline"添加到外部<div>，但它不適用於移動渲染：http://www.bootply.com/G5ZzJ8imG8（您必須單擊移動預覽按鈕才能看到渲染缺陷）。

<div class="form-inline"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit <input type="number" id="downtime" class="form-control" style="width:90px" min="1" max="120" inputmode="numeric" pattern="[0-9]*" placeholder="0"> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    <a id="delayed_logoff_help" class="pointer" tabindex="0" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Donec consectetur suscipit orci, fringilla rhoncus erat tristique vel. Phasellus sagittis dapibus fermentum. Donec posuere erat et mi tincidunt, vitae ultricies turpis pellentesque. Morbi volutpat neque lorem, eget luctus leo elementum sed. Cras cursus velit mi. Quisque et vulputate est, gravida elementum urna.">What's this?</a> 
</div>

$('#delayed_logoff_help').popover()

有沒有辦法讓這個以方便行動也？

來源

2016-10-27 Dylan Klomparens

請包括[MCVE]在這個問題本身，而不是在第三方網站。 –

無法使用StackOverflow代碼編輯器正確工作。現在仍然需要依靠外部網站。 –

我們只是在尋找一些代碼。並不難。 –

除去股利的form-inline類設置輸入風格display: inline和width: auto爲我工作：

<div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit <input style="display: inline; width: auto;" type="number" id="downtime" class="form-control" min="1" max="120" inputmode="numeric" pattern="[0-9]*" placeholder="0"> aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    <a id="delayed_logoff_help" class="pointer" tabindex="0" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Donec consectetur suscipit orci, fringilla rhoncus erat tristique vel. Phasellus sagittis dapibus fermentum. Donec posuere erat et mi tincidunt, vitae ultricies turpis pellentesque. Morbi volutpat neque lorem, eget luctus leo elementum sed. Cras cursus velit mi. Quisque et vulputate est, gravida elementum urna.">What's this?</a> 
</div>

來源

2016-10-27 20:56:33

-2

似乎您可能需要使用Bootstrap併爲移動視圖設置響應式網格。

來源

2016-10-27 20:48:53 raimond

網格如何提供幫助？我希望它在同一條線上。我不想分開內容。你可以解釋嗎？ –

你可以嘗試添加這對你的CSS：

div{ 
    display : inline-flex; 
    align-items : center; 
    flex-wrap : wrap; 
}

但我不知道這是你想要的可移動部件

來源

2016-10-27 20:53:20 mJehanno

HTML文本框和使用Bootstrap或CSS的同一行上的文本

回答

相關問題