【问题标题】:how to align text in two columns in bulma?如何在bulma的两列中对齐文本?
【发布时间】:2021-10-10 10:58:32
【问题描述】:

我有一页有两列。在左边我有一个表格,在右边我只有文本。我需要做的是将文本与表单标签对齐。
我尝试通过调整行高、填充和边距来做到这一点,但它在 chrome 中看起来很好,但在其他浏览器中完全关闭。有什么建议吗?
这是它现在的样子:

<head>
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
 <style>
    @media  (min-width: 1000px) and (max-width: 1215px) {
     h1{
         font-size:1.4rem !important;
     }
     p{
         font-size:1.1rem !important;
     }
 }
 @media (min-width: 1216px) and (max-width: 1407px){ 
     h1{
         font-size:1.6rem !important;
     }
     p{
         font-size:1.15rem !important;
     }
 }
 @media(min-width: 1408px) { 
     h1{
         font-size:1.7rem !important;
     }
     p{
         font-size:1.2rem !important;
    }
}
   </style>
  </head>
  <section class="hero is-fullheight">
        <div class="hero-body">
            <div class="container has-text-centered">

                <div class="columns is-8 is-variable ">

<div class="column is-half-desktop is-full-mobile has-text-left">
                    <div id="mc_embed_signup">
                <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll">

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-EMAIL" dir="rtl" style="text-align: right;">البريد الإلكتروني <span class="asterisk">*</span>
                    </label>
                    <div class="control">
                        <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-FNAME" dir="rtl" style="text-align: right;">الاسم الاول</label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-LNAME" dir="rtl" style="text-align: right;">اسم العائلة </label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                        </div>
    </div>
    
 </div>
</form>
    </div>
</div>
    <div class="column is-half-desktop has-text-right">

<br>
        <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.  </p><br>
        <p class="has-text-justified"   dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p><br>
        <p class="has-text-justified"   dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p><br>
        </div>
</div>
</section>

【问题讨论】:

    标签: html css forms styles bulma


    【解决方案1】:

    我会使用 3 列容器来对齐每个字段和它的文本。另外,我将您的内联文本对齐样式换成了 Bulma 的内置帮助类。

    <head>
      <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
      <style>
        @media (min-width: 1000px) and (max-width: 1215px) {
          h1 {
            font-size: 1.4rem !important;
          }
    
          p {
            font-size: 1.1rem !important;
          }
        }
    
        @media (min-width: 1216px) and (max-width: 1407px) {
          h1 {
            font-size: 1.6rem !important;
          }
    
          p {
            font-size: 1.15rem !important;
          }
        }
    
        @media(min-width: 1408px) {
          h1 {
            font-size: 1.7rem !important;
          }
    
          p {
            font-size: 1.2rem !important;
          }
        }
        
        #mc_embed_signup .mc-field-group {
          width: 100%;
        }
      </style>
    </head>
    
    <section class="hero is-fullheight">
      <div class="hero-body">
        <div class="container has-text-centered">
          <div id="mc_embed_signup">
            <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
              <div id="mc_embed_signup_scroll">
                <div class="columns">
                  <div class="column is-6">
                    <div class="mc-field-group field">
                      <label class="label has-text-weight-bold has-text-right" for="mce-EMAIL" dir="rtl">البريد الإلكتروني <span class="asterisk">*</span>
                      </label>
                      <div class="control">
                        <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                      </div>
                    </div>
                  </div>
                  <div class="column is-6 is-flex is-align-items-center">
                    <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p>
                  </div>
                </div>
                <div class="columns">
                  <div class="column is-6">
                    <div class="mc-field-group field">
                      <label class="label has-text-weight-bold has-text-right" for="mce-FNAME" dir="rtl">الاسم الاول</label>
                      <div class="control">
                        <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                      </div>
                    </div>
                  </div>
                  <div class="column is-6 is-flex is-align-items-center">
                    <p class="has-text-justified" dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p>
                  </div>
                </div>
                <div class="columns">
                  <div class="column is-6">
                    <div class="mc-field-group field">
                      <label class="label has-text-weight-bold has-text-right" for="mce-LNAME" dir="rtl">اسم العائلة </label>
                      <div class="control">
                        <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                      </div>
                    </div>
                  </div>
                  <div class="column is-6 is-flex is-align-items-center">
                    <p class="has-text-justified" dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    

    【讨论】:

      猜你喜欢
      • 2011-09-01
      • 2020-01-15
      • 1970-01-01
      • 1970-01-01
      • 2012-09-21
      • 2021-03-03
      • 2011-07-10
      • 2018-12-29
      • 1970-01-01
      相关资源
      最近更新 更多