I was writing a login page with bootstrap.

The lable for checkbox is always in centre.

    <div  >
      <div >

        <div ></div>

        <div >
          ....
          <form  novalidate>

            ...

            <!-- 用户协议 -->
            <div >
              <div >
                <label  for="invalidCheck" style="text-align: left;">勾选即表示同意《用户协议》</label>
                <input  type="checkbox" value="" id="invalidCheck" required>

                <div >
                  You must agree before submitting.
                </div>
              </div>
            </div>

            ...

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

login_page

I try adding "text-align:left",or change the "display" to "inline". But it does not help.

Unless I change the div class from 'col-12' to 'col-7'.

I don't know why,and how to set it.

CodePudding user response：

You can fix it by adding text-align in the parent div.

<div  style="text-align: left;">
    <label  for="invalidCheck">勾选即表示同意《用户协议》</label>
    <input  type="checkbox" value="" id="invalidCheck" required>
    <div >
        You must agree before submitting.
    </div>
</div>

CodePudding user response：

    <div ></div>

    <div >
      ....
      <form  novalidate>

        ...

        <!-- 用户协议 -->
        <div >
          <div >
            <label  for="invalidCheck" style="text-align: left;">勾选即表示同意《用户协议》</label>
            <input  type="checkbox" value="" id="invalidCheck" required>

            <div >
              You must agree before submitting.
            </div>
          </div>
        </div>

        ...

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