ブートストラップのインライン入力要素を768pxまで水平に保つ？

私はform-inlineを適用したBootstrapフォームをいくつか持っています。私は768pxまで、要素がインラインで保持されていることを読んだ。しかし、これが当てはまらない場合は、input-lgをいくつかの要素に代入すれば、最後の要素は768pxを上回る新しい行でブレークします。ブートストラップのインライン入力要素を768pxまで水平に保つ？

これらの要素を768pxまで小さくすることもできます。これを行う方法はありますか？

コード：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg" placeholder="Your Title"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg" placeholder="Your Description"> 
 
    </div> 
 
</form>

出典

2017-05-01 anemaria20

あなたはあまりにもコードを投稿することができますか？ – ZimSystem

@ZimSystem投稿 – anemaria20

私の更新の例を参照してください：あなたは自分のサイズより良好な制御を持っているので、http://www.bootply.com/paPWbTuwAL

を私は、フォームの各項目にブートストラップ列クラスを追加し、少しカスタムCSSを追加しました

CSS

.custom-form .form-control{ 
    width:100%; 
}

HTML

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <h1 class="margin-bottom-30">Get Instant Essay Writing/Editing Help</h1> 
      </div> <!-- end col-xs-12 --> 
     </div> <!-- end row --> 

     <div class="row"> 
       <form class="form-inline custom-form"> 
        <div class="form-group col-xs-2"> 
         <input type="text" class="form-control input-sm " placeholder="Your Title"> 
        </div> 

        <div class="form-group col-xs-4"> 
         <select class="form-control input-sm"> 
            <option value="0" selected="" disabled="">Choose Assignment Type</option> 
            <option value="1">Essay</option> 
            <option value="18">Admission/Scholarship Essay</option> 
            <option value="12">Research Paper</option> 
            <option value="26">Research Proposal</option> 
            <option value="4">Coursework</option> 
            <option value="2">Term paper</option> 
            <option value="5">Article</option> 
            <option value="22">Literature/Movie review</option> 
            <option value="9">Reports</option> 
            <option value="3">Dissertation</option> 
            <option value="29">Thesis</option> 
            <option value="30">Thesis Proposal</option> 
            <option value="13">Creative Writing</option> 
            <option value="11">Business Plan</option> 
            <option value="15">Speech/Presentation</option> 
            <option value="7">Outline</option> 
            <option value="14">Annotated Bibliography</option> 
            <option value="6">Dissertation Proposal</option> 
            <option value="17">Proofreading</option> 
            <option value="25">Paraphrasing</option> 
            <option value="28">PowerPoint Presentation</option> 
            <option value="27">Personal Statement</option> 
            <option value="24">Non-word Assignments</option> 
            <option value="23">Math Assignment</option> 
            <option value="21">Lab Report</option> 
            <option value="20">Code</option> 
            <option value="19">Case Study</option> 
            <option value="16">Other types</option> 
         </select> 
        </div> 

        <div class="form-group col-xs-3"> 
         <input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address"> 
        </div> 

        <div class="form-group col-xs-2 mg-up"> 
         <button type="submit" class="form-control input-sm col-xs-3">Check The Price</button> 
        </div> 
     </form></div> 
     <div class="row"> 

       <h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3> 


     </div> 
    </div>

出典

2017-05-01 13:21:15

申し訳ありません申し訳ありません私は自分のコードのサンプルを投稿しました。実際には4つの異なる形式のフォームグループのうち4つがあります – anemaria20

完全なコードは次のとおりです。http://www.bootply.com/kzDWLE3gbw – anemaria20

ちょっと@ anemaria20、フルコードのおかげで、http：// www.bootply.com/paPWbTuwAL –

<form class="form-horizontal"> 
<div class="row"> 
    <div class="form-group col-sm-6"> 
     <input type="text" class="form-control input-lg" placeholder="Your Title"> 
    </div> 
    <div class="form-group col-sm-6"> 
     <input type="text" class="form-control input-lg" placeholder="Your Description"> 
    </div> 
</div> 
</form>

768px以上の同じ行にそれらを維持するために使用します。あなたは768pxの下に水平を維持したい場合は、単に「COL-XS-6」は、このようなために、「COL-SM-6」クラスを変更：

<form class="form-horizontal"> 
<div class="row"> 
    <div class="form-group col-xs-6"> 
     <input type="text" class="form-control input-lg" placeholder="Your Title"> 
    </div> 
    <div class="form-group col-xs-6"> 
     <input type="text" class="form-control input-lg" placeholder="Your Description"> 
    </div> 
</div> 
</form>

出典

2017-05-01 13:21:32 Mazi

xs画面サイズでは、削除できない水平スクロールが常にあることに気付きましたか？ – anemaria20

が持つフィールドの幅を制限してくださいmax-widthプロパティ。
float: left;プロパティを1行に残すように追加します。
フォームを浮動要素のコンテナにするには、overflow: hidden;プロパティを使用します。

TE結果を確認してください：http://www.bootply.com/JXslxuh3qX

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.form-2-groups-on-one-line, 
 
.form-4-groups-on-one-line { 
 
    clear: left; 
 
    overflow: hidden; 
 
} 
 
.form-2-groups-on-one-line .form-group { 
 
    float: left; 
 
    max-width: 50%; 
 
} 
 
.form-4-groups-on-one-line .form-group { 
 
    float: left; 
 
    max-width: 25%; 
 
} 
 
.form-2-groups-on-one-line input, 
 
.form-2-groups-on-one-line select, 
 
.form-4-groups-on-one-line input, 
 
.form-4-groups-on-one-line select { 
 
    max-width: 100%; 
 
}

<form class="form-inline form-2-groups-on-one-line"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg" placeholder="Your Title"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg" placeholder="Your Description"> 
 
    </div> 
 
</form> 
 

 
<form class="form-inline form-4-groups-on-one-line"> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg" placeholder="Your Title"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <select class="form-control input-lg"> 
 
     <option value="0" selected="" disabled="">Choose Assignment Type</option> 
 
     <option value="1">Essay</option> 
 
     <option value="18">Admission/Scholarship Essay</option> 
 
     <option value="12">Research Paper</option> 
 
     <option value="26">Research Proposal</option> 
 
     <option value="4">Coursework</option> 
 
     <option value="2">Term paper</option> 
 
     <option value="5">Article</option> 
 
     <option value="22">Literature/Movie review</option> 
 
     <option value="9">Reports</option> 
 
     <option value="3">Dissertation</option> 
 
     <option value="29">Thesis</option> 
 
     <option value="30">Thesis Proposal</option> 
 
     <option value="13">Creative Writing</option> 
 
     <option value="11">Business Plan</option> 
 
     <option value="15">Speech/Presentation</option> 
 
     <option value="7">Outline</option> 
 
     <option value="14">Annotated Bibliography</option> 
 
     <option value="6">Dissertation Proposal</option> 
 
     <option value="17">Proofreading</option> 
 
     <option value="25">Paraphrasing</option> 
 
     <option value="28">PowerPoint Presentation</option> 
 
     <option value="27">Personal Statement</option> 
 
     <option value="24">Non-word Assignments</option> 
 
     <option value="23">Math Assignment</option> 
 
     <option value="21">Lab Report</option> 
 
     <option value="20">Code</option> 
 
     <option value="19">Case Study</option> 
 
     <option value="16">Other types</option> 
 
    </select> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address"> 
 
    </div> 
 

 
    <div class="form-group mg-up"> 
 
    <button type="submit" class="form-control input-lg">Check The Price</button> 
 
    </div> 
 
</form>

出典

2017-05-01 13:31:49

max-widthの代わりに「min-width」を意味しましたか？また、最後のフォーム要素の周りの要素もいくつかの画面幅で浮動します。 – anemaria20

@ anemaria20私は自分の答えを更新しました。 http://www.bootply.com/JXslxuh3qXを確認してください。達成したいことはありますか？ –

ブートストラップのインライン入力要素を768pxまで水平に保つ？

答えて

関連する問題