Почему моя отзывчивая сетка W3.CSS остается в свернутом состоянии? - PullRequest
Новая
       21

Почему моя отзывчивая сетка W3.CSS остается в свернутом состоянии?

0 голосов
/ 03 октября 2018

Я пытаюсь использовать W3.CSS для создания формы, которая динамически сужается в зависимости от разрешения экрана или размера окна браузера.В состоянии по умолчанию он должен иметь строку, содержащую столбцы «Имя» и «Номер телефона», строку, содержащую столбцы «Электронная почта» и «Компания», строку, содержащую столбец «Комментарии», и строку, содержащую поле CAPTCHA икнопка отправки.В суженном состоянии все столбцы должны располагаться друг над другом.Если развернуть окно в этой скрипке , вы увидите, что происходит желаемое поведение.Проблемная скрипка может быть замечена здесь .Если вы сравните их, вы увидите, что количество элементов, по большей части, одинаково.Единственное отличие состоит в том, что у того, который работает, есть некоторые дополнительные элементы и некоторые другие незначительные различия.Я изучал их в течение последних нескольких часов, и я был бы признателен, если бы другой набор (или наборы) глаз мог просматривать их для меня.

Версия, которая не расширяется: 

<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
    <div style="padding: 50px 0px;line-height: 22px;font-weight: normal;text-align:center;background-color: rgb(234, 234, 234);">
        <div class="w3-row">
            <div class="w3-col 16">
                <!--make a row for the label and input-->
                <div class="w3-row">
                    <!-- make a col for the label -->
                    <div class="w3-col 14">
                        <label for="Name_input">Name</label>
                    </div>
                    <!-- make a col for the input -->
                    <div class="w3-col 18">
                        <select>
                            <option> NodeList</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="w3-col 16">
                <!--make a row for the label and input-->
                <div class="w3-row">
                    <!-- make a col for the label -->
                    <div class="w3-col 14">
                        <label for="Phone_input">Phone</label>
                    </div>
                    <!-- make a col for the input -->
                    <div class="w3-col 18">
                        <input type="text" id="Phone_input" style="width:100px;">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="w3-row">
            <div class="w3-col 16">
                <!--make a row for the label and input-->
                <div class="w3-row">
                    <!-- make a col for the label -->
                    <div class="w3-col 14">
                        <label for="email_input">email</label>
                    </div>
                    <!-- make a col for the input -->
                    <div class="w3-col 18">
                        <input type="text" id="email_input" style="width:100px;">
                    </div>
                </div>
            </div>
            <div class="w3-col 16">
                <!--make a row for the label and input-->
                <div class="w3-row">
                    <!-- make a col for the label -->
                    <div class="w3-col 14">
                        <label for="Company_input">Company</label>
                    </div>
                    <!-- make a col for the input -->
                    <div class="w3-col 18">
                        <input type="text" id="Company_input" style="width:100px;">                                                            
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="w3-row">
            <!-- make a col for the label -->
            <div class="w3-col 12">
                <label for="comments_input">comments</label>
            </div>
            <!-- make a col for the input -->
            <div class="w3-col 110">
                <textarea id="comments_input" style="height: 103px; font-size: 20px; margin: 0px; width: 322px;"></textarea>

                <!-- if this was the last non-col input, add an additional row for the prevention input and submit button-->


                <div class="w3-row">
                    <div id="DynForm_Prevention_1496" class="w3-col 15">
                        <label for="DynBtn_Prevention_1496" id="DynBtn_Prevention_Label_1496">Enter product in the box</label>
                        <input name="DynBtn_Prevention_1496" type="text" id="DynBtn_Prevention_1496" style="font-weight:600;width:100px;">
                        <span id="DynBtn_Prevention_Keyword_1496" style="display:none;">product</span>
                        <span style="color:#ff0000">*</span>
                        <span style="color:#ff0000;display:none;" id="DynBtn_Prevention_Invalid_1496">Incorrect value, please try again.</span>
                    </div>
                    <div class="w3-col 17">
                        <div style="text-align:left;padding:0px">
                            <a id="submitBtn_1496" class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif" href="http://dnndev.me/CAS_DynForm-Test/moduleId/1802/controller/Item/action/Submit">Submit product Pro Free Trial Request</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="DynForm_Footer_1496" style="padding:20px;text-align:center">
            <h5>Download instructions and licensing information will be emailed to you. Please make sure your email address is valid.</h5>
        </div>
    </div>
</div>

Версия, которая расширяется: 

<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
<div style="padding: 50px 0px; line-height: 22px; font-weight: normal; text-align:center;background-color: rgb(234, 234, 234);">

<div class="w3-row">
  <div class="w3-col l6">

    <div class="w3-row">
      <div class="w3-col l4">

        <label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name" style="font-size:22px">Name<span style="color:#ff0000">*</span></label></div>

      <div class="w3-col l8">
        <input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Name" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name"
          style="width:85%;font-size:22px"><br>

        <span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl01" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span>

      </div>
    </div>
  </div>

  <div class="w3-col l6">

    <div class="w3-row">
      <div class="w3-col l4">

        <label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone" style="font-size:22px">Phone Number<span style="color:#ff0000">*</span></label></div>

      <div class="w3-col l8">
        <input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Phone" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone"
          style="width:85%;font-size:22px"><br>

        <span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl03" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
    </div>
  </div>
</div>

<br>

<div class="w3-row">
  <div class="w3-col l6">

    <div class="w3-row">
      <div class="w3-col l4">

        <label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email" style="font-size:22px"> Email<span style="color:#ff0000">*</span></label></div>

      <div class="w3-col l8">
        <input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$email" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email"
          style="width:85%;font-size:22px"><br>

        <span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl05" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
    </div>
  </div>

  <div class="w3-col l6">

    <div class="w3-row">
      <div class="w3-col l4">

        <label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company" style="font-size:22px">Company</label></div>

      <div class="w3-col l8">
        <input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Company" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company"
          style="width:85%;font-size:22px"></div>
    </div>
  </div>
</div>

<br>

<div class="w3-row">
  <div class="w3-col l2">

    <label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments" style="font-size:22px">Comments</label></div>

  <div class="w3-col l10">
    <textarea name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$comments" rows="2" cols="20" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments"
      style="height:120px;width:85%;font-size:20px"></textarea>
    <br>

    <div style="text-align:center;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif;padding-top:15px">
      <div id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_vsDemoRequestTable" class="NormalRed xmp-validation" style="font-size:16px;display:none;">

      </div>
    </div>


    <br>
    <div class="w3-row">
      <div class="w3-col l5">
        <div style="float:left;padding-left:10px">
          <img src="/portals/0/images/logos/product_thumbnail2.png" height="22"> </div>
        <div style="float:left;font-size:18px">&nbsp;&nbsp;<span style="color:#ff0000">Enter <b>product</b> in the
            box.</span></div>
        <div style="clear:both"></div>

        <input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$productcaptcha" type="text" maxlength="6" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_productcaptcha"
          style="font-size:16px;width:88px;margin-bottom:10px"><span style="color:#FF0000">*</span>

      </div>


      <div class="w3-col l7">
        <div style="text-align:left;padding:0px">

          <input type="submit" name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08" value="Submit product Pro Free Trial Request"
            onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08&quot;, &quot;&quot;, true, &quot;dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_XMPVAL&quot;, &quot;&quot;, false, false))"
            class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif"></div>

      </div>
    </div>
  </div>
</div>

<div style="padding:20px;text-align:center">
  <h5>
    Download instructions and licensing information will be emailed to you. Please make sure your email address is
    valid.
  </h5>
</div>

1 Ответ

0 голосов
/ 03 октября 2018

Проблема заключалась в том, что в версии, которая не работала, у меня было «12,14,15,16,17,18,110» вместо «l2, l4, l5, l6, l7, l8, l10» послеклассы "w3-col".

...