<div class="default-template"> Enter the information about the host "> <div class="default-template"> Enter the information about the host "> <div class="default-template"> Enter the information about the host " />

中央のブートストラップcol-xs- *クラス(中央揃えのブートストラップ固定幅入力ボット)

ブートストラップ入力フィールドをdiv列の中央に配置しようとしていますが、試した方法がどれもうまくいかないようです。

これまでに試したこと

<div data-role="page" id="add-host" class="container">
      <div class="default-template">
              

Enter the information about the host

<div class="col-xs-4 center-block"> <input type="date" id="host_name" value="" required="" /> </div> </div> </div>
0
あなたはクラスtext-centerを試しましたか?
追加された 著者 Arun D Nambissan,

5 答え

これを試して:

<div class="col-xs-4 text-center">
  <input type="date" id="host_name" value="" required="" />
</div>

または

<input type="date" id="host_name" value="" required="" />
0
追加された
<input type = "日付" id = "ホスト名"値= ""必須= "" />
追加された 著者 Arun D Nambissan,
しかし text-center クラスは私のために働きました
追加された 著者 Arun D Nambissan,
text-center center の両方を試しました。どちらも私にとってはうまくいきます。
追加された 著者 Arun D Nambissan,
機能しません。ボタン自体の中心ではなく、ボタンの内側のテキストのみを中央に配置します。
追加された 著者 Space Bear,
どちらもうまくいきませんでした、
を使うことはそれをさらに大きな混乱にしました。 :/ jquerry mobileとbootstrap mobileを使っています
追加された 著者 Space Bear,

There are potentially many ways you could do this: using the grid or with no grid at all, using bootstrap form classes or not. If you're using the grid you should use an offset if possible. Column Offsetting Docs

実用的な例:

<div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code">

/*#4 */

.input-control {
  max-width: 200px;
  margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="alert alert-info">#1 Using the Grid with Bootstrap Form Classes</div>
  <div class="row">
    <div class="default-template">
      

Enter the information about the host

<div class="col-sm-4 col-sm-offset-4"> <input type="date" class="form-control" value="" required="" /> </div> </div> </div> </div>
<div class="container"> <div class="alert alert-info">#2 Using the Grid without Bootstrap Form Classes</div> <div class="row"> <div class="default-template text-center">

Enter the information about the host

<div class="col-sm-4 col-sm-offset-4"> <input type="date" value="" required="" /> </div> </div> </div> </div>
<div class="container"> <div class="alert alert-info">#3 Not Using the Grid without Bootstrap Form Classes</div> <div class="default-template text-center">

Enter the information about the host

<input type="date" value="" required="" /> </div> </div>
<div class="container"> <div class="alert alert-info">#4 Not Using the Grid but With Bootstrap Form Classes</div> <div class="default-template">

Enter the information about the host

<input type="date" class="form-control input-control" value="" required="" /> </div> </div>
</div> </div>

0
追加された
最初のものを使って、それは働いた!私が自分のdivを入れた順番も物事を巧妙にしていたようでした。
追加された 著者 Space Bear,

次のように myClass というカスタムクラスを col-xs-4 divに追加します。

<div class="col-xs-4 center-block myClass">
    <input type="date" id="host_name" value="" required="" />
</div>

それからあなたのCSSにこれを追加してください:

.myClass {  
   text-align:center;
}
.myClass input {
   display:inline-block;
}

Link to jsFiddle: https://jsfiddle.net/e0d8my79/119/

0
追加された

:centerを使えませんか。それは責任があります、そしてそれはすべてを集中させます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code">

<input type="date" id="host_name" value="" required="" />
</div> </div>

0
追加された
そうではありません、それはただテキストボックスの中に

を入れて、そして非常に混乱させます。

追加された 著者 Space Bear,

ボタンを col-xs-4 divの中央に配置しようとしている場合は、text-centerクラスを使用してそれを実行できます( #host_name display:inline-block )、または margin:0 auto を使用( #host_name display:block がある場合)

if you are trying to center the button relative to the whole page, you can try removing the col-xs-4 class then set the div's width to what you need and use margin:0 auto

0
追加された