부트 스트랩 텍스트 상자 및 행 내 버튼 배치

응용 프로그램에 연결하려고하는 기본 부트 스트랩 및 HTML 코드가 있습니다. 아래 코드는 한 행에 텍스트 상자를 배치하지만 텍스트 상자 바로 아래에 단추와 ActionLink가 있습니다. 페이지 전체에 걸쳐 이러한 3 가지 기능을 모두 한 행에 넣으려고합니다.부트 스트랩 텍스트 상자 및 행 내 버튼 배치

마치 페이지가 열리고 텍스트 상자가 첫 번째 열 너비의 100 %를 차지하는 것처럼 프로그래밍됩니다. 변경하려고 할 수 있지만 현재 너비로 유지하려면 텍스트 상자를 선호합니다.

참고 : 텍스트 상자 옆에 직접 단추를 넣으려고했지만 그 아래에 여전히 푸시됩니다. 따라서 페이지가 열리고 텍스트 상자가 첫 번째 열의 100 %를 차지하는 것 같습니다. .

@using (Html.BeginForm("Index", "Person", FormMethod.Get)) 
{ 
<form asp-action="Index" method="get"> 
    <div class="row"> 
     <div class="form-actions no-color col-md-12"> 
      <p> 
       Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="@ViewBag.CurrentFilter" /> 
       <input type="submit" value="Search" class="btn btn-default" /> | 
       @Html.ActionLink("Back to List", "Index") 
      </p> 
     </div> 
    </div> 
</form> 
} 

New Code: 
<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" /> 
     <input type="submit" value="Search" class="btn btn-default" /> | 
    </div> 
    @Html.ActionLink("Back to List", "Index") 
</form> <br />

출처

2017-01-02 AndrewC10

면도칼 코드를 편집, inline form with bootstrap classes을 작성, 당신은

<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" id="txtSearch" name="searchString" /> 
    </div> 
    <input type="submit" value="Search" class="btn btn-default" /> | 
    <a href="#"> Back To List </a> 
</form>

출처

2017-01-02 15:26:30 Halter

응답 해 주셔서 감사합니다. 이것은 나를 거기에 붙잡기 시작하고있다. 면도기 코드를 꺼내서 위의 코드를 편집했습니다. 어떤 이유로 든 양식이 열이있는 것처럼 여겨집니다. 이제 버튼과 링크가 정렬되지만 세로 막대는 전체 행 아래로 이상하게 밀려납니다. – AndrewC10

@ AndrewC10 확실하지 않은 경우,이 코드와 충돌하는 다른 스타일이있을 수 있습니다. 크롬 개발 도구와 같은 것으로 검사 할 것입니다. [이 jsbin을 확인하십시오, 다른 코드 간섭없이 잘 작동합니다] (https://jsbin.com/najuvixano/edit?html,output) 도움이 될 수도있는 스크린 샷을 추가 할 수 있다면 – Halter

예, 내가하려고하는 것을 CSS가 무시하는 경우. 나는 여전히 MVC 애플 리케이션의 전체 파일 구조를 배우고있다. 지금 스크린 샷을 추가하려고 시도 중입니다. – AndrewC10

에 그것을 다시 넣어야 할 것이다 문제는 그 클래스 "폼 컨트롤"의 귀하의 fisrt 입력 텍스트. 그것의 전시는 막힌다. 텍스트의 너비를 유지하려는 경우. 디스플레이를 인라인 블록으로 설정하고 너비를 설정하십시오.

출처

2017-01-02 15:37:47

부트 스트랩 텍스트 상자 및 행 내 버튼 배치

답변

관련 문제