HTMLテキストボックスとブートストラップやCSSを使用した同じ行のテキスト

テキストと同じ行にHTMLテキストボックスを配置するにはどうすればよいですか？私は、デスクトップとモバイルの両方のレンダリングのために働くためにこれを必要http://www.bootply.com/FhlyLoLMNv HTMLテキストボックスとブートストラップや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()

：ここでは私が働いている例です。私はこれをデスクトップ上で動作させることができましたが、<div>にclass="form-inline"を追加しましたが、モバイルレンダリングでは機能しません：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コードエディタでこれを正しく動作させることができませんでした。まだ外部サイトに依存していなければなりません。 –

私たちはいくつかのコードを探しています。それほど難しくない。 –

はDIVから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

モバイルビューでは、ブートストラップを使用してレスポンスグリッドを設定する必要があるようです。

出典

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テキストボックスとブートストラップやCSSを使用した同じ行のテキスト

答えて

関連する問題